阅读 84

防抖和节流

概念

节流: 规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

防抖: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

作用

限制函数的调用频率。

实现

防抖:(关键字:clearTimeout)

function debounce(fn, time) {
    let timer;
    return function(){
                   clearTimeout(timer);
                   var args = arguments;
                   var context = this;
                   timer = setTimeout(() => {
                                  fn.apply(context, args)
                                }, time);
                }   

}


节流(关键字:need标记)

function ttrottle(fn, time) {
    var need = true;
    return function(){
      if (!need)  return;
      var args = arguments;
      var context = this;
       need = false;
       timer = setTimeout(() => {
                      fn.apply(context, args);
                       need = true;
                    }, time)
    }
}
参考资料:
https://github.com/woai30231/webDevDetails/blob/master/18/readme.md