亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消