js防抖与节流

在前端开发中会遇到一些频繁的事件触发,例如input,keyup,keydown,scroll,resize,mousemove等,这非常影响性能,所以我们需要控制它们触发的频率,方法就是防抖与节流。

  • 防抖
    防抖的原理就是:要等你触发完事件 n 秒内不再触发事件,我才执行。
      function debounce(func, wait) {
          var timeout;
          return function () {
              var context = this;
              var args = arguments;
              clearTimeout(timeout)
              timeout = setTimeout(function () {
                  func.apply(context, args)
              }, wait);
          }
      }
    
  • 节流
    节流的原理很简单:如果你持续触发事件,每隔一段时间,只执行一次事件。
    有两种主流的实现方式,一种是使用时间戳,一种是设置定时器。
    • 定时器实现
      特点:会在 n 秒后第一次执行,事件停止触发后依然会再执行一次事件
      function throttle(func, wait) {
          var timeout;
          return function () {
              var context = this;
              var args = arguments;
              if (!timeout) {
                  timeout = setTimeout(function () {
                      func.apply(context, args)
                      timeout = null;
                  }, wait)
              }
          }
      }
    
    • 时间戳实现
      特点:第一次事件会立刻执行,停止触发后没有办法再执行事件
      function throttle(func, wait) {
          var previous = 0;
          return function () {
              var now = Date.now();
              var context = this;
              var args = arguments;
              if (now - previous > wait) {
                  func.apply(context, args);
                  previous = now;
              }
          }
      }
    
  • 参考
    JavaScript专题之跟着underscore学节流
    JavaScript专题之跟着underscore学防抖
    原文作者:tiancai啊呆
    原文地址: https://www.jianshu.com/p/352993c3b1c4
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞