首先我们要先了解到什么是防抖和节流
关于防抖
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
关于节流
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
那么我们怎么来实现防抖和节流呢
关于防抖实现的应用场景
函数防抖也是大同小异。在某个特定时间后执行函数，但是在此时间段内重复调用函数的话，不会执行。只有当用户停下操作后，才会在该时间后执行此函数。
主要用于输入框keyup事件等一些需要用户输入内容的行为。
防抖的代码示例
function debounce(fn, delay=1000) {
let timer = null;
return function() {
const args = arguments,
that = this;
clearTimeout(timer);
timer = setTimeout(()=> {
fn.apply(that, args)
}, delay)
}
}
function test() {
console.log(Math.random())
}
window.addEventListener('scroll', debounce(test, 2000));
节流的代码示例
function throttle1(fn, delay=200) {
let timer = null;
let lastTime;
return function() {
let args = arguments,
that = this,
nowTime = Date.now();
if (lastTime && nowTime - lastTime < delay) {
clearTimeout(timer);
timer = setTimeout(() => {
lastTime = nowTime;
fn.apply(that, args);
}, delay)
} else {
lastTime = nowTime;
fn.apply(that, args);
}
}
}
节流throttle代码：
function throttle(fn,delay) {
let canRun = true; // 通过闭包保存一个标记
let timer = null;
return function () {
let args = arguments,
that = this;
// 在函数开头判断标记是否为true，不为true则return
if (!canRun) return;
// 立即设置为false
canRun = false;
clearTimeout(timer);
// 将外部传入的函数的执行放在setTimeout中
timer = setTimeout(() => {
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
// 当定时器没有执行的时候标记永远是false，在开头被return掉
fn.apply(that, args);
canRun = true;
}, delay);
};
}
function test() {
console.log(Date.now())
}
window.addEventListener('scroll', throttle(test, 200));
简单的总结一下：
函数节流：间隔执行函数，主要用于keyup事件。
1.防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案；
函数防抖：某个时间内都不执行，该时间后才执行函数，主要用于touchmove, resize等事件。
2.防抖函数只会执行一次，且是最后触发的那一次，而节流函数会规律性的执行多次；
