1 为什么需要防抖和节流
在前端开发当中，有些交互事件，会被频繁触发，这样会导致我们的页面渲染性能下降，如果频繁触发接口调用的话，会直接导致服务器性能的浪费。
举个例子，在下面的代码中，我们定义了一个输入框，输入一段文字，测试键盘的keyup（键盘弹起）事件触发了多少次，通过该实例来演示事件是如何被频繁触发的。
<input type="text" id="demo">
<div>触发了：<span id="count">0</span>次</div>
<script>
// 获取input输入框与span标签
let demo = document.getElementById("demo");
let count = document.getElementById("count");
// 为demo输入框注册keyup事件
let init = 0; // 记录keyup事件被触发的次数
demo.onkeyup = function () {
// 将span标签中的文本修改为事件被触发的次数
count.innerHTML = ++init;
}
</script>
从上面的演示可以看到，我在输入框中输入了5个字，但是keyup事件会被触发30次。如果我们使用这样的方式去检测用户输入的用户名是否可用，这样高频率的触发不仅是对性能极大的浪费，而且用户还没有输入完就开始检测，对用户来说提示并不友好。在这样的情况下，我们就可以等用户输入完成之后，再去触发函数，这样的优化就使用到了防抖与节流。
2 防抖与节流原理
函数防抖：在事件触发后的 n 秒之后，再去执行真正需要执行的函数，如果在这 n 秒之内事件又被触发，则重新开始计时。 也就是说，如果用户在间隔时间内一直触发函数，那么这个防抖函数内部的真正需要执行的函数将永远无法执行。
那么根据防抖的原理，我们可以尝试想象一下上面的例子的改进措施，如果为keyup事件添加防抖函数，那么只有当keyup在一段时间内不再被触发，函数才会执行，也就说才开始计数。
函数节流：规定好一个单位时间，触发函数一次。如果在这个单位时间内触发多次函数的话，只有一次是可被执行的。想执行多次的话，只能等到下一个周期里。
如果为keyup事件添加节流函数，那么效果就是，在一段时间内，会计数一次，然后在下一段时间内，再计数一次。
在了解防抖函数和节流函数的原理之后，接下来我们可以尝试自己写一个防抖与节流的函数，看看是否能达到我们预想的效果。
3 实现一个防抖函数
3.1 初步实现
根据之前的描述，在事件被触发一段时间之后，函数才会执行一次，那么防抖函数中我们应该为其传入两个参数：被执行的函数fun和这段时间time。
// fun：被执行的函数
// time：间隔的时间
function debounce(fun, time) { }
对于防抖函数来说，它的返回值应该是一个函数，因为事件触发时接收一个函数。在该函数内部，要设计一个定时器，让在time时间后触发函数fun。
function debounce(fun, time) {
return function () {
// time时间后触发函数fun
setTimeout(fun, time);
}
}
但是上面的函数有一个问题，就是事件再次被触发时，会出现time时间后再执行一次函数fun，不能达到事件触发完成time时间后再执行函数的效果，也就是说，事件会被延时触发，并不能减少触发，这是因为定时器效果进行了累加，因此我们需要取消之前的定时器，以新的定时器为准。
function debounce(fun, time) {
let timer;
return function () {
// 取消当前的定时器效果
clearTimeout(timer);
// time时间后触发函数fun
timer = setTimeout(fun, time);
}
}
到这里一个初步的防抖函数就完成了，接下来使用该函数改进之前的例子，具体代码如下：
<input type="text" id="demo">
<div>触发了：<span id="count">0</span>次</div>
<script>
// 获取input输入框与span标签
let demo = document.getElementById("demo");
let count = document.getElementById("count");
// 防抖函数
function debounce(fun, time) {
let timer;
return function () {
// 取消当前的定时器效果
clearTimeout(timer);
// time时间后触发函数fun
timer = setTimeout(fun, time);
}
}
// 为demo输入框注册keyup事件
let init = 0; // 记录keyup事件被触发的次数
demo.onkeyup = debounce(function () {
// 将span标签中的文本修改为事件被触发的次数
count.innerHTML = ++init;
}, 1000);
</script>
3.2 this问题
从上面的效果图来看，我输入5个字后，1秒后keyup事件就触发了1次，对比之前的30次，大大减少了事件的触发频率。但是添加防抖之后，原本函数的this指向发生了改变。原本函数的this指向了触发事件的那个对象，但是添加防抖后this指向了window。
// 添加防抖之前打印 this
demo.onkeyup = function () {
console.log(this); // <input type="text" id="demo"></input>
}
// 添加防抖之后打印 this
demo.onkeyup = debounce(function () {
console.log(this);
}, 1000);
因此在防抖函数中，我们需要重新把this指回触发事件的对象上。那防抖函数中返回的函数this指向了谁呢，我们可以打印一下：
function debounce(fun, time) {
return function () {
console.log(this);
}
}
我们发现它的this也指向了触发事件的对象，那么接下来我们只需要让定时器的回调函数的this指向触发事件的对象就可以，这个过程主要使用call函数来修改this的指向。
function debounce(fun, time) {
let timer;
return function () {
// 将当前的this赋值给that
let that = this;
// 取消当前的定时器效果
clearTimeout(timer);
// time时间后触发函数fun
timer = setTimeout(function () {
fun.call(that); // 使用call改变函数内部的this指向
}, time);
}
}
3.3 event问题
解决了this指向的问题，接下来观察事件对象event的内容，添加防抖之前，事件对象event是键盘事件KeyboardEvent，但是添加防抖之后，event为undefined。
// 添加防抖之前
demo.onkeyup = function (e) {
console.log(e);
}
// 添加防抖后
demo.onkeyup = debounce(function (e) {
console.log(e);
}, 1000);
同样的操作，我们可以打印一下防抖函数返回的函数的arguments参数，发现参数中就包含了事件对象。
function debounce(fun, time) {
console.log(arguments);
}
那么接下来我们将这个参数传给函数fun就可以了，具体传给call函数。call函数第二个参数开始接受其他的参数，因此需要使用spread运算符（…）传递参数。
function debounce(fun, time) {
let timer;
return function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
}3.4 立即执行
到这一步防抖函数基本可以完成了，但是我们可以再为其添加一些功能，比如说立即执行。当设置了立即执行之后，第一次事件触发后，函数fun会立即执行，但是第一次事件触发后的time时间后，函数才可以重新触发。
我们可以传递第三个参数，第三个参数immediate决定了是否立即执行，true为是，false为否。那么代码逻辑就可以使用if…else…语句来进行判断。我们原本的防抖函数肯定不是立即执行的，因此放在else语句中。
function debounce(fun, time, immediate) {
let timer;
return function () {
let that = this; // 将当前的this赋值给that
let args = arguments; // 获取函数的参数
clearTimeout(timer); // 取消当前的定时器效果
if (immediate) {
// 立即执行代码
} else { // 不立即执行
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
}
}if语句中的代码不是简单的fun.call(that, ...args);就可以，因为当immediate为true时，就会一直调用，与不加防抖没什么区别。因此我们可以引入新的变量callNow，来记录是否要立即执行。
function debounce(fun, time, immediate) {
let timer;
return function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
if (immediate) { // 立即执行
let callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, time);
if (callNow) fun.call(that, ...args);
} else { // 不立即执行
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
}
}if语句中的具体逻辑为：当immediate为true时，如果之前计时器不存在，也就是说第一次触发，那么callNow的值为true，那么代码就会立即执行；计时器存在，callNow就是false，不会立即执行代码。接下来可以在keyup事件中试验一下：
<input type="text" id="demo">
<div>触发了：<span id="count">0</span>次</div>
<script>
// 获取input输入框与span标签
let demo = document.getElementById("demo");
let count = document.getElementById("count");
// 防抖函数
function debounce(fun, time, immediate) {
let timer;
return function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
if (immediate) { // 立即执行
let callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, time);
if (callNow) fun.call(that, ...args);
} else { // 不立即执行
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
}
}
// 为demo输入框注册keyup事件
let init = 0; // 记录keyup事件被触发的次数
demo.onkeyup = debounce(function () {
// 将span标签中的文本修改为事件被触发的次数
count.innerHTML = ++init;
}, 1000, true);
</script>
从上面效果可以看出，在输入第一个1时，事件就立即触发了，在接下来的1秒内事件不再被触发，而是在事件被触发的1秒之后才可以继续触发。
3.5 返回值问题
如果被执行的函数有返回值，使用上面的防抖函数就没办法获取到返回值了，因此可以继续改进：
function debounce(fun, time, immediate) {
// result用来获取返回值
let timer, result;
return function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
if (immediate) { // 立即执行
let callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, time);
if (callNow) result = fun.call(that, ...args);
} else { // 不立即执行
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
return result;
}
}3.6 取消防抖
如果一个防抖函数等待的时间过长，immediate为true，那么我们可以取消防抖，然后再去触发，这样就可以减少等待时间。
在代码中我们将防抖返回的函数保存在变量debounced中，并且为它增加一个cancel方法，通过该方法可以取消当前的定时器，从而实现取消的效果。
function debounce(fun, time, immediate) {
// result用来获取返回值
let timer, result;
let debounced = function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
if (immediate) { // 立即执行
let callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, time);
if (callNow) result = fun.call(that, ...args);
} else { // 不立即执行
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
return result;
}
debounced.cancel = function () {
clearTimeout(timer); // 清除定时器
timer = null; // 闭包会导致内存泄漏，因此需要将定时器制空
}
return debounced; // 返回防抖函数
}使用keyup事件试验一下，当没有取消防抖时，一段时间后才可以再次触发事件：
<input type="text" id="demo">
<div>触发了：<span id="count">0</span>次</div>
<button id="btn">取消防抖</button>
<script>
// 获取input输入框、span标签、按钮
let demo = document.getElementById("demo");
let count = document.getElementById("count");
let btn = document.getElementById("btn");
// 防抖代码函数省略
// 为demo输入框注册keyup事件
let init = 0; // 记录keyup事件被触发的次数
function fun() { // 触发keyup后要执行的函数
count.innerHTML = ++init;
}
let fd = debounce(fun, 3000, true);
demo.onkeyup = fd; // 为输入框注册keyup事件
btn.onclick = function () { // 取消防抖的效果
fd.cancel();
}
</script>
当取消防抖函数之后，就可以立即触发事件了：
3.7 总结
初步防抖函数，解决了this指向以及event参数的问题：
function debounce(fun, time) {
let timer;
return function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
}增加了立即执行效果的防抖函数：
function debounce(fun, time, immediate) {
let timer;
return function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
if (immediate) { // 立即执行
let callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, time);
if (callNow) fun.call(that, ...args);
} else { // 不立即执行
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
}
}解决了返回值问题的防抖函数：
function debounce(fun, time, immediate) {
// result用来获取返回值
let timer, result;
return function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
if (immediate) { // 立即执行
let callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, time);
if (callNow) result = fun.call(that, ...args);
} else { // 不立即执行
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
return result;
}
}增加了取消功能的防抖函数：
function debounce(fun, time, immediate) {
// result用来获取返回值
let timer, result;
let debounced = function () {
// 将当前的this赋值给that
let that = this;
// 获取函数的参数
let args = arguments;
// 取消当前的定时器效果
clearTimeout(timer);
if (immediate) { // 立即执行
let callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, time);
if (callNow) result = fun.call(that, ...args);
} else { // 不立即执行
// time时间后触发函数fun
timer = setTimeout(function () {
// 使用call改变函数内部的this指向，并传递参数
fun.call(that, ...args);
}, time);
}
return result;
}
debounced.cancel = function () {
clearTimeout(timer); // 清除定时器
timer = null; // 闭包会导致内存泄漏，因此需要将定时器制空
}
return debounced; // 返回防抖函数
}4 实现节流函数
4.1 通过时间戳实现节流
当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳（时间戳初始值为0），如果大于设置的时间time，就执行函数fun，然后更新时间戳为当前的时间戳，如果小于time，就不执行函数。
根据上面的表述，节流函数有两个参数，一个是要执行的函数fun，一个是等待的时间time，那么就可以写出初始的代码：
function throttle(fun, time) {
// 节流代码
}节流函数的返回值也是一个函数，首先要设置初始时间戳为0，然后获取当前的时间戳，如果间隔的时间大于time，那么就执行函数，否则不执行。
function throttle(fun, time) {
let old = 0;
return function () {
let now = new Date().valueOf(); // 获取当前的时间戳
if (now - old > time) {
fun(); // 执行函数
old = now; // 更新旧时间戳
}
}
}
与防抖函数相同，要考虑到this指向和event改变的情况，因此引入两个变量，使用call函数更改this指向并且重新传入参数。
function throttle(fun, time) {
let that, args;
let old = 0;
return function () {
let now = new Date().valueOf(); // 获取当前的时间戳
that = this; // 获取this
args = arguments; // 获取参数
if (now - old > time) {
fun.apply(that, args); // 更改this指向并传入参数
old = now; // 更新旧时间戳
}
}
}
示例代码：节流函数效果
<input type="text" id="demo">
<div>触发了：<span id="count">0</span>次</div>
<script>
// 获取input输入框、span标签
let demo = document.getElementById("demo");
let count = document.getElementById("count");
// 节流函数
function throttle(fun, time) {
let that, args;
let old = 0;
return function () {
let now = new Date().valueOf(); // 获取当前的时间戳
that = this; // 获取this
args = arguments; // 获取参数
if (now - old > time) {
fun.apply(that, args); // 更改this指向并传入参数
old = now; // 更新旧时间戳
}
}
}
// 为demo输入框注册keyup事件
let init = 0; // 记录keyup事件被触发的次数
demo.onkeyup = throttle(function () {
count.innerHTML = ++init;
}, 1000);
</script>
4.2 使用定时器实现节流
节流函数有两个参数，并且返回值是一个函数，会修改this指向和event事件对象，那么它的框架就可以理出来了：
function throttle(fun, time) {
let that, args;
return function () {
that = this;
args = arguments;
fun.apply(that, args);
}
}
函数应该在定时器的回调函数中调用，因此还需要声明一个定时器变量timer，当定时器不存在时，触发定时器，调用函数。
function throttle(fun, time) {
// timer是定时器对象
let that, args, timer;
return function () {
that = this;
args = arguments;
if (!timer) {
timer = setTimeout(function () {
fun.apply(that, args);
}, time);
}
}
}但是当定时器timer一旦触发，就会永远有值，不可能再触发定时器了，因此需要在定时器回调函数中将time置为空。
function throttle(fun, time) {
// timer是定时器对象
let that, args, timer;
return function () {
that = this;
args = arguments;
if (!timer) {
timer = setTimeout(function () {
timer = null;
fun.apply(that, args);
}, time);
}
}
}
示例代码：查看函数效果
<input type="text" id="demo">
<div>触发了：<span id="count">0</span>次</div>
<script>
// 获取input输入框、span标签、按钮
let demo = document.getElementById("demo");
let count = document.getElementById("count");
// 节流函数
function throttle(fun, time) {
// timer是定时器对象
let that, args, timer;
return function () {
that = this;
args = arguments;
if (!timer) {
timer = setTimeout(function () {
timer = null;
fun.apply(that, args);
}, time);
}
}
}
// 为demo输入框注册keyup事件
let init = 0; // 记录keyup事件被触发的次数
demo.onkeyup = throttle(function () {
count.innerHTML = ++init;
}, 1000);
</script>
4.3 时间戳和定时器组合实现
从上面的效果可以看出，时间戳时间的节流函数，第一次输入文本会立即触发，但是当输入结束后就不再触发了，定时器实现的节流函数，第一次输入文本要等待一段时间后再触发，但是当输入结束之后还会再触发一遍。那么接下来实现一个第一次输入文本会立即触发，但是输入结束之后还会再次触发的节流函数。
首先将两个防抖函数合并一下：
function throttle(fun, time) {
let that, args, timer;
let old = 0; // 设置初始时间戳
return function () {
that = this;
args = arguments;
let now = new Date().valueOf(); // 获取初始的时间戳
if (now - old > time) {
fun.apply(that, args);
old = now;
}
if (!timer) {
timer = setTimeout(function () {
timer = null;
fun.apply(that, args);
}, time);
}
}
}这个防抖函数的时间戳和定时器同时在运行，那我们可以在定时器时间戳内部，定时器内回调函数执行一次，就将old的值设置为最新的时间戳。这样就可以让时间戳和定时器节流函数时间同步。
function throttle(fun, time) {
let that, args, timer;
let old = 0; // 设置初始时间戳
return function () {
that = this;
args = arguments;
let now = new Date().valueOf(); // 获取初始的时间戳
if (now - old > time) {
fun.apply(that, args);
old = now;
}
if (!timer) {
timer = setTimeout(function () {
old = new Date().valueOf(); // 将old的值设置为最新的时间戳
timer = null;
fun.apply(that, args);
}, time);
}
}
}但是不应该让两个同步，接下来就执行定时器的防抖函数，在时间戳防抖函数中把定时器取消掉置为空。
function throttle(fun, time) {
let that, args, timer;
let old = 0; // 设置初始时间戳
return function () {
that = this;
args = arguments;
let now = new Date().valueOf(); // 获取初始的时间戳
if (now - old > time) {
if (timer) {
clearTimeout(timer);
timer = null;
}
fun.apply(that, args);
old = now;
}
if (!timer) {
timer = setTimeout(function () {
old = new Date().valueOf(); // 将old的值设置为最新的时间戳
timer = null;
fun.apply(that, args);
}, time);
}
}
}
示例代码：查看节流函数的效果
<input type="text" id="demo">
<div>触发了：<span id="count">0</span>次</div>
<script>
// 获取input输入框、span标签
let demo = document.getElementById("demo");
let count = document.getElementById("count");
// 节流函数省略
// 为demo输入框注册keyup事件
let init = 0; // 记录keyup事件被触发的次数
demo.onkeyup = throttle(function () {
count.innerHTML = ++init;
}, 1000);
</script>
4.4 节流优化
如果我们希望设计一个防抖函数，可以根据不同的情况来选择不同的防抖函数，也就是说，对上面三种情况再进行一个结合。那么我们可以设置options为第三个参数，根据传的值判断使用哪种防抖函数。options可以有两个参数：leading，表示是否打开第一次执行；trailing：表示是否打开最后一次执行。
function throttle(fun, time, options) { // options决定使用哪种节流效果
let that, args, timer;
let old = 0; // 设置初始时间戳
if (!options) options = {}; // 如果没有该参数，置为空对象
return function () {
that = this;
args = arguments;
let now = new Date().valueOf(); // 获取初始的时间戳
// leading为false，表示不打开第一次执行
if (options.leading === false && !old) {
old = now; // 这样会将下面的时间戳节流代码跳过
}
if (now - old > time) { // 第一次回直接执行
if (timer) {
clearTimeout(timer);
timer = null;
}
fun.apply(that, args);
old = now;
}
// trailing为false，表示不打开最后一次执行
if (!timer && options.trailing !== false) { // 最后一次会被执行
timer = setTimeout(function () {
old = new Date().valueOf(); // 将old的值设置为最新的时间戳
timer = null;
fun.apply(that, args);
}, time);
}
}
}示例代码：节流函数的使用效果，打开第一次执行和最后一次执行
demo.onkeyup = throttle(function () {
count.innerHTML = ++init;
}, 1000, { leading: true, trailing: true }); // 表示打开第一次执行和最后一次执行
打开第一次执行，关闭最后一次执行：
demo.onkeyup = throttle(function () {
count.innerHTML = ++init;
}, 1000, { leading: true, trailing: false }); // 表示打开第一次执行，关闭最后一次执行
关闭第一次执行，打开最后一次执行：
demo.onkeyup = throttle(function () {
count.innerHTML = ++init;
}, 1000, { leading: false, trailing: true }); // 表示打开第一次执行，关闭最后一次执行
如果两个都关闭，会出现bug，因此使用时不会将两个都关闭。
5 应用场景
防抖应用场景：
- scroll事件滚动触发
- 搜索框输入查询
- 表单验证
- 按钮提交事件
- 浏览器窗口缩放，resize事件
节流应用场景：
- DOM元素的拖拽功能实现
- 射击游戏
- 计算鼠标的移动距离
- 监听scroll滚动事件
本文学习于视频：手写函数防抖和节流
到此这篇关于JavaScript防抖与节流超详细全面讲解的文章就介绍到这了,更多相关JavaScript防抖与节流内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
