防抖和节流

假如有一个饮水机，规定按下按钮之后2秒后开始出水，有个闲得x疼的人很快的按按钮10秒，饮水机会作何反应呢？

防抖（debounce）：在按下按钮和出水的这2秒内如果还有人按按钮，饮水机会重新开始计算2秒，也就是说总是以最新的操作为基准来计算时间

节流：即使被人不间断的按按钮了10秒钟，但是饮水机依然不紧不慢的2s出一次水，也就是说不管外部操作的多快，饮水机总会有自己的频率

代码实现

防抖

function debounce(func, delay) {    var timer;    return function() {        clearTimeout(timeout);        timer = setTimeout(function(){          func();        },delay)    };};

节流

function throttle(fn, threshhold) { var timer var start = Date.now(); return function () {    var curr = Date.now();     clearTimeout(timer)    if(curr - start >= threshhold){         fn()        start = curr }else{     timer = setTimeout(function(){        fn()      }, threshhold);    }  }}

说一个神器：，以动画的形式看到两者的区别

使用场景

防抖：频繁操作但是只需要响应最后一次即可

输入框验证，只需要对最后一次输入事件作出验证即可

resize事件

节流：调节频率，以一定的频率去响应

搜索联想

响应拖拽

转载地址：http://jzgjx.baihongyu.com/

你可能感兴趣的文章