一般在进行窗口的 resize、scroll 等输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用 debounce（防抖）和 throttle（节流）的方式来优化事件触发频率过高导致的响应速度跟不上触发频率，出现延迟假死或卡顿的现象。
函数防抖(debounce)
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。
缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟
- // 防抖debounce代码：
- function debounce(fn,delay) {
- var timeout = null; // 创建一个标记用来存放定时器的返回值
- return function (e) {
- // 每当用户输入的时候把前一个 setTimeout clear 掉
- clearTimeout(timeout);
- // 然后又创建一个新的 setTimeout, 这样就能保证 interval 间隔内如果时间持续触发，就不会执行 fn 函数
- timeout = setTimeout(() => {
- fn.apply(this, arguments);
- }, delay);
- };
- }
- // 处理函数
- function handle() {
- console.log('防抖：', Math.random());
- }
- // 滚动事件
- window.addEventListener('scroll', debounce(handle, 500));
当持续触发 scroll 事件时，事件处理函数 handle 只在停止滚动 500 毫秒之后才会调用一次，也就是说在持续触发 scroll 事件的过程中，事件处理函数 handle 一直没有执行。
函数节流(throttle)
当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次。
- // 节流throttle代码：
- function throttle(fn,delay) {
- let canRun = true; // 通过闭包保存一个标记
- return function () {
- // 在函数开头判断标记是否为true，不为true则return
- if (!canRun) return;
- // 立即设置为false
- canRun = false;
- // 将外部传入的函数的执行放在setTimeout中
- setTimeout(() => {
- // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
- // 当定时器没有执行的时候标记永远是false，在开头被return掉
- fn.apply(this, arguments);
- canRun = true;
- }, delay);
- };
- }
- function sayHi(e) {
- console.log('节流：', e.target.innerWidth, e.target.innerHeight);
- }
- window.addEventListener('resize', throttle(sayHi, 500));
当触发事件的时候，我们设置一个定时器，再次触发事件的时候，如果定时器存在，就不执行，直到 delay 时间后，定时器执行执行函数，并且清空定时器，这样就可以设置下个定时器。当第一次触发事件时，不会立即执行函数，而是在 delay 秒后才执行。而后再怎么频繁触发事件，也都是每 delay 时间才执行一次。当最后一次停止触发后，由于定时器的 delay 延迟，可能还会执行一次函数。
总结
函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，就会取消之前的计时器而重新设置，这样一来，只有最后一次操作能被触发。
函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。
区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
时间是一个好东西，记录的是学习的证据
评论