为了账号安全,请及时绑定邮箱和手机立即绑定

js防抖与节流

标签:
JavaScript

在前端开发中会遇到一些频繁的事件触发,例如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);
          }
      }
  • 节流
    节流的原理很简单:如果你持续触发事件,每隔一段时间,只执行一次事件。
    有两种主流的实现方式,一种是使用时间戳,一种是设置定时器。

      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;
              }
          }
      }
    • 时间戳实现
      特点:第一次事件会立刻执行,停止触发后没有办法再执行事件

    • 定时器实现
      特点:会在 n 秒后第一次执行,事件停止触发后依然会再执行一次事件

  • 参考
    JavaScript专题之跟着underscore学节流
    JavaScript专题之跟着underscore学防抖



作者:tiancai啊呆
链接:https://www.jianshu.com/p/352993c3b1c4

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消