防抖

防抖,就是延迟一段时间执行函数,如果在这段时间内又触发这个函数,则延迟重新计算

节流,函数需要隔一段时间才能触发,避免高频触发函数,造成性能损失

防抖节流关键点在于,闭包。

function debounce(fn, delay, maxDelay = null) {
  let timer = null;
  let nowDate = new Date().getTime();
  
  return function () {
    let context = this, arg = arguments;
    clearTimeout(timer);
      // 节流的体现
    if (maxDelay && (new Date().getTime() - nowDate >= maxDelay)) {
      fn.apply(context, args);
      nowDate = new Date().getTime();
    } else {
        // 防抖的体现
      timer = setTimeout(() => {
      fn.apply(context, args);
      }, delay)
    }
  }
}

window.addEventListener('resize', debounce(() => console.log(123), 500, 1000));

debounce 函数里面返回了一个函数,里面的那个函数引用了外部变量 timernowDate ,这两个变量会在闭包内保持住,因此能延迟触发以及防止频繁触发目的函数。

这样写法,待节流函数超时触发的时候,有可能会导致 fnthis 指向错误(当然现在执行的都是属于window的函数,所以没问题,假如,防抖节流函数是执行了一个对象的方法,那么 this 未必是指向这个对象的),因此,最好其实是用 call ,或 apply 来调用。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一名前端开发者,我们经常会处理各种事件,比如常见的click、scroll、 resize等等。仔细一想,会发...
    一米阳光kk阅读 3,452评论 0 0
  • 函数节流 还记得上篇文章中说到的图片懒加载吗?我们在文章的最后实现了一个页面滚动时按需加载图片的方式,即在触发滚动...
    柏丘君阅读 7,846评论 1 19
  • 防抖和节流的区别 防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 实现方...
    做最棒的阅读 3,398评论 0 1
  • 前言 最近和前端的小伙伴们,在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是,想深入研究一下两者...
    youthcity阅读 23,712评论 5 78
  • 让一切都平静下来吧!
    0dc48341b9de阅读 767评论 0 0