在连续的多次触发同一事件的情况下，给定一个固定的时间间隔（假设 300 ms），该时间间隔内若存在新的触发，则清除之前的定时器并重新计时（ 重新计时 300 ms ）
表现为在短时间多次触发同一事件，只会执行一次函数（最后触发的那次）。
function debounce (fn, wait) {
if (typeof fn !== 'function') throw new Error('first param need a function');
if (typeof wait !== 'number') throw new Error('second param need a number');
let timer = null;
// 通过闭包隐藏 debounce 函数内部变量，避免外部意外修改
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, wait)
}
}
问题：
1.在上面代码中，setTimeout 中使用了箭头函数，那么如果不使用箭头函数（而使用 function 普通函数）又该怎么做呢，两者之间有什么区别，这一点会在本文阐述，可以自行先思考一下。
2.如果不使用 arguments ，还有哪种书写方式。
3.为什么要使用 apply ，而不是直接执行
在固定时间间隔（一个时间周期）内，大量触发同一事件，触发事件只会执行一次。周期结束，再次触发事件则开始新的周期
1.定时器版本
function throttle(fn, delay) {
if (typeof fn !== 'function') throw new Error('first param need a function');
if (typeof wait !== 'number') throw new Error('second param need a number');
let timer = null;
return function() {
if (timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null
}, delay)
}
}
2.时间戳版本
function throttle(fn, delay) {
if (typeof fn !== 'function') throw new Error('first param need a function');
if (typeof delay !== 'number') throw new Error('second param need a number');
let startTime = 0;
return function () {
let currentTime = new Date().getTime();
if (currentTime - startTime > delay) {
fn.apply(this, arguments);
startTime = currentTime;
}
}
}
节流中存在和防抖同样的问题，下面会通过防抖来做例子。
以防抖函数举例，先看 2.1 中给出的防抖函数（去掉部分代码）
function debounce (fn, wait) {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, wait)
}
}
如何使用
// html
<input id="inputBox" />
// js
const inputBox = document.getElementById('inputBox');
inputBox.addEventListener('keyup', debounce((e) => {
console.log('this:', this)
console.log('e:', e)
console.log('value:', inputBox.value);
}, 1000))
3.1 问题一：为什么要使用箭头函数
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, wait)
在输入框输入1，看下控制台效果：
可以看到，e 是可以拿到的，this 指向 window
然后我们把箭头函数改成 function 的普通函数：
timer = setTimeout(function() {
fn.apply(this, arguments);
timer = null;
}, wait)
可以看到，e 是 undefined，this 指向 window
要知道原因，则需要明白以下几点：
function debounce (fn, wait) {
let timer = null;
return function () {
console.log('isE:', arguments) // arguments 就是 fn 的参数
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, wait)
}
}
在 debounce 中传进一个函数，传进函数的参数是 e，实际上这个参数传递到 debounce 中返回函数的参数。这么说比较绕，我们可以打出来看看（上面代码第四行打印 isE ）
可以看出，在 debounce 中的返回函数的参数，就是debounce第一个参数 fn 的参数 e 。
明白上面一点后，再来看箭头函数和普通函数的区别：
箭头函数的 this ，arguments 都取决于其外层第一个普通函数，当使用箭头函数时，this 和 arguments 都是源于 debounce 返回函数的 this 和 arguments，这样自然可以拿到对应的 e；
而当使用普通函数时，function的 this 和 arguments 都来源于其自身，因此 e 是肯定拿不到了，另外需要注意的是，尽管上面的 this 表现出来的都是指向 window，但本质上是不一样的。所以使用普通函数时，需要提前保存 this 。
关于 this 指向问题，可以查阅 JS 作用域，闭包，this
那么如果不想使用箭头函数，也可以在返回函数中提前保存 this 与 arguments，如下：
function debounce (fn, wait) {
let timer = null;
// 通过闭包隐藏 debounce 函数内部变量，避免外部意外修改
return function () {
console.log('isE:', arguments)
if (timer) {
clearTimeout(timer);
}
let _this = this; // 提前保存 this
let args = arguments; // 提前保存 arguments
timer = setTimeout(function() {
fn.apply(_this, args); // 使用提前保存好的 this 和 arguments
timer = null;
}, wait)
}
}
至此，该问题解答完毕。
3.2 问题二：如果不使用 arguments ，还有哪种书写方式
在 3.1 中我们知道了，debounce 的返回函数的参数就是 fn 的传入参数，那么可以使用扩展运算符 … 来获取参数。
function debounce (fn, wait) {
let timer = null;
return function (...args) { // 使用扩展运算符
if (timer) {
clearTimeout(timer);
}
let _this = this;
timer = setTimeout(function() {
fn.apply(_this, args);
timer = null;
}, wait)
}
}
3.3 问题三：为什么要使用 apply ，而不是直接执行 fn
apply 可以用来修改 this 指向和参数。上面两个问题中我们讲述了 this 和 arguments 的问题，在这可以理解，使用 apply 正是为了获取传入函数的 fn 的 this 和 arguments 。
防抖与节流本质上都是为了避免短时间大量触发时间
防抖一般应用于：
节流一般应用于：
当然，具体使用哪种，还是需要根据业务需求来选择