脚本宝典收集整理的这篇文章主要介绍了【JS】节流和防抖，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

定义

throTTLe（节流）：在连续触发的事件中，在n秒内只执行一次 debounce（防抖）：触发事件后，函数在n秒内只执行一次，如果事件再次触发，则会重新计算函数执行时间

区别

防抖如果一直输入（键盘不抬起），那么回调函数就永远不会执行，等到键盘抬起，那么计时器才会正常工作执行函数 节流是等现在的时间戳减去过去保存的时间戳的值大于设置的延迟时间才会执行回调函数

代码实现

节流

function throttle(func, wait) {
  VAR context, args;
  var previous = 0;

  return function() {
      var now = +new Date(); //(new Date()).getTime();
      context = this;
      args = arguments;
      /*
       * 第一遍总是能执行的 
       * 第二遍PRevious就变成了上一次的now
       * 后面就等now增加，now - previous > waIT 那么就执行函数
      */
      if (now - previous > wait) {
          func.apply(context, args);
          previous = now;
      }
  }
}

防抖

function debounce(cb,delay){
  var t = null;
  return function(){
    clearTimeout(t); // 如果函数再次触发，清除计时器重新计时
    var _self = this, // 往执行函数传入实参
        args = arguments; // this指向调用者
    t = setTimeout(function(){
      cb.apply(_self, args);
    },delay);
  }
}

脚本宝典总结

以上是脚本宝典为你收集整理的【JS】节流和防抖全部内容，希望文章能够帮你解决【JS】节流和防抖所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。