阅读 4529

一图秒懂函数防抖和函数节流

函数防抖(debounce)和函数节流(throttle)都是为了缓解函数频繁调用,它们相似,但有区别

如上图,一条竖线代表一次函数调用,函数防抖是间隔超过一定时间后才会执行,函数节流是一定时间段内只执行一次。

函数防抖实现

function debounce(fn, delay) {
  let timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  }
}
复制代码

函数节流实现

function throttle(fn, cycle) {
  let start = Date.now();
  let now;
  let timer;
  return function () {
    now = Date.now();
    clearTimeout(timer);
    if (now - start >= cycle) {
      fn.apply(this, arguments);
      start = now;
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, cycle);
    }
  }
}
复制代码

lodash对这两个方法的实现更灵活一些,有第三个参数,可以去参观学习。

最后

欢迎关注我的微博@狂刀二

关注下面的标签,发现更多相似文章
评论