节流和防抖

 

节流和防抖的目的都是防止某一时间频繁触发，但是原理不一样

函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行

防抖：

在事件被触发n秒后再进行回调，如果这期间又被触发，则重新计时

代码实现：

function debounce(fn, wait) {
    var timeout = null;
    return function() {
        if(timeout !== null) 
                clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}

应用：

function handle(){xxx}
window.addEventListener('scroll',debounce(handle,1000))

意思是监听scroll事件，事件处理函数handle只停止滚动1000ms以后才会执行一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行

节流：

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。一般利用时间戳+定时器来实现

function throttle(func, delay) {
     var timer = null;
     var startTime = Date.now();
     return function() {
             var curTime = Date.now();
             var remaining = delay - (curTime - startTime);
             var context = this;
             var args = arguments;
             clearTimeout(timer);
              if (remaining <= 0) {
                    func.apply(context, args);
                    startTime = Date.now();
              } else {
                    timer = setTimeout(func, remaining);
              }
      }
}

 

应用场景：

       debounce:

               search搜索联想，用户不断输入时，用防抖来节约请求资源

               window触发resize的时候，不断的调整浏览器窗口大小会不断触发这个事件，用防抖来让其只触发一次

       throttle

              鼠标不断点击触发，mousedown(单位事件内只触发一次)

              监听滚动事件，比如是否滑到底部自动加载跟多