乐趣区

关于javascript:JavaScript-实现节流函数防抖函数

jiezi

节流函数（throttling fountion）和防抖函数（debouncing fountion）都是为了实现一个目标：缩小办法被调用的次数，进步网站效率。
罕用于解决一些会被频繁触发的事件，比如说 keydown, keyup, click, mousemove, resize 等等。

节流函数（throttling founction）

举例子说，你在嗑瓜子，每次你都会把瓜子壳扔在地上，而扫地机器人则负责扫地。扫地机器人每过 10 分钟才会转回你丢瓜子壳的区域，进行打扫。当它执行完之后，就来到了，可能去厨房清扫了。这时候，无论你持续丢多少瓜子壳，扫地机器人都不会过去，直到过了 10 分钟之后。
节流函数是只会在指定的工夫周期内执行一次。

示例

实现监听窗口变动的性能

代码实现

var previous = 0;
var timeId;
var throttle = function (callback, interval) {var now = new Date();
  if (now - previous > interval) {
    // 等以后周期完结之后，再执行
    callback();
    previous = now;
  }
};
// 另一种实现节流的办法
var throttle2 = function (callback, interval) {
  // 如果曾经设置了定时工作，那么什么都不须要做
  if (timeId) {return;}
  // 在一段周期之后，再次设置定时工作
  timeId = setTimeout(() => {callback();
    // setTimeout 定时办法实现后，把 timeId 设置为 undefined
    timeId = undefined;
  }, interval);
};

防抖函数（debouncing fountion）

仍旧是你在嗑瓜子，然而这次是你妈妈在帮你扫地，她通知你，等你嗑完这一袋瓜子后叫她，她才会慢吞吞过去帮你扫掉。之前无论你叫她多少次，她听到了，但并不想理你。
防抖函数就是会等事件完结之后，冷却一段时间，才会执行。

示例

实现如下依据用户输出进行搜寻的性能

代码实现

<body>
  <input type="text" id="search-input" />
  <p>input event fired times:<span id="fired-times"></span></p>
  <p>
    debounce search founcion execute times:<span id="debounce-times"></span>
  </p>
</body>
var timerId;
const handleUserInput = function () {var firedTimesDom = document.getElementById("fired-times");
  firedTimes = firedTimesDom.innerHTML || 0; // 获取初始 fire times
  firedTimesDom.innerHTML = parseInt(firedTimes) + 1; // fire times + 1
  debounce(callSearchApi, 300);
};

var debounce = function (callback, delay) {if (timerId) {clearTimeout(timerId); // 如果始终在申请，则不会调用
  }
  timerId = setTimeout(callback, delay); // 等申请完结之后，delay 一段时间再调用
};

const callSearchApi = function () {var debounceSearchTimesDom = document.getElementById("debounce-times");
  debounceSearchTimes = debounceSearchTimesDom.innerHTML || 0; // 获取初始 debounce search times
  debounceSearchTimesDom.innerHTML = parseInt(debounceSearchTimes) + 1; // debounce search times + 1
};
const inputBox = document.getElementById("search-input");
inputBox.addEventListener("input", handleUserInput); // input 增加监听事件

总结

函数名 区别 实用场景
节流函数 无论事件触发多少次，它只会定期执行，没有延迟时间 实用于只关怀最初状态的状况，比如说输出搜寻性能，须要期待用户进行输出来获取事后输出的搜寻后果
防抖函数 在事件完结的时候提早执行 实用于须要晓得所有中间状态时。例如在用户调整窗口大小时跟踪屏幕宽度，并在页面内容发生变化时重新安排页面内容，而不是等到用户实现操作
退出移动版