防抖动(debounce)是一种用于优化前端性能的技术,主要应用于需要限制函数执行频率的场景。其核心思想是延迟函数执行,直到一段时间内没有新的触发事件发生,然后再执行该函数。
具体实现方式是通过设置一个定时器,在函数被触发时启动计时器,如果在指定的时间间隔内函数再次被触发,则重新计时。只有当定时器结束并且在间隔期间没有新的触发事件发生时,才执行函数。
举例来说,假设我们有一个输入框,用户每输入一个字符就会触发一个输入事件,我们希望在用户停止输入后的500毫秒再执行输入验证函数。这时候就可以利用防抖动的思想,在输入事件触发时启动一个500毫秒的定时器,在每次输入事件触发时重新计时。只有当用户停止输入并且500毫秒内没有新的输入事件发生时,才执行输入验证函数,从而减少了函数执行的频率。
防抖动常用于输入框输入验证、滚动事件处理等需要限制函数执行频率的场景,可以有效减少不必要的计算和提升页面性能。
防抖的核心原理是通过设置定时器来延迟函数的执行,在指定的时间间隔内,如果函数再次被触发,则重新计时。只有当定时器结束并且在间隔期间没有新的触发事件发生时,才执行函数。
具体步骤如下:
这样就保证了在频繁触发事件时,只有最后一次触发事件被处理,而其他触发事件被忽略,从而达到减少函数执行次数和提升性能的效果。
手搓一个防抖实现在频繁点击提交按钮时,只有最后一次点击提交按钮被处理,而之前点击的提交按钮被忽略。
var btn = document.getElementById('btn');
btn.addEventListener('click', () => {
setTimeout(() => {
console.log('提交');
}, 1000)
})
addEventListener
方法为给按钮添加一个点击事件监听器,当按钮被点击就执行回调函数。setTimeout
函数设置的定时器,延迟一秒后执行其中的回调函数。但是这样并没有实现防抖。当用户点击几次就会执行几次回调函数,也就会执行相应次数的定时器的回调函数。
连续点击4下提交按钮:
输出了4次提交。
我们在这个基础上进行改进。
function handle() {
//ajax请求
console.log('提交');
}
btn.addEventListener('click', debounce(handle))
function debounce(fn) {
let timer = null;
return function () {
clearTimeout(timer)
timer = setTimeout(fn, 1000)
}
}
我们定义一个debounce函数实现防抖操作。定义了一个handle函数用于处理点击事件。
通过addEventListener
方法给按钮添加了一个点击事件监听器,当用户点击按钮时触发防抖函数debounce返回的函数。
在debounce函数中,我们创建了一个timer变量并且赋值为null,然后返回一个函数。在返回的函数中实现了清除上一个计时器,然后重新设置一个计时器的操作。
你会发现返回的函数中使用了闭包来保存一个定时器timer的引用。
连续点击4下提交按钮:
实现了防抖。
让我们一起化身为JavaScript引擎执行一遍这段代码,深入了解防抖的实现。
图解:
输出handle的this指向。
function handle() {
//ajax请求
console.log('提交',this);
}
btn.addEventListener('click', debounce(handle))
function debounce(fn) {
let timer = null;
return function () {
clearTimeout(timer)
timer = setTimeout(fn, 1000)
}
}
连续点击提交按钮4次:
输出结果表明handle的this指向是window。
让我们分析handle的this指向原本应该指向什么:
addEventListener决定handle的执行,所以addEventListener干扰了this,让ajax请求this不指向全局,而是指向btn。这是合理的,也是应该的。
但是是计时器函数执行的fn函数,计时器函数的this是指向window,ajax请求的this也指向window。
我们实现防抖,但是不能改变原有的this指向。我们需要将this指向纠正。
var btn = document.getElementById('btn');
function handle() {
console.log('提交', this);
}
btn.addEventListener('click', debounce(handle))
function debounce(fn) {
let timer = null;
return function () {
clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this)
}, 1000)
}
}
我们将计时器中的回调函数改为箭头函数,并且在箭头函数内对handle函数的this指向进行显式绑定。
因为箭头函数没有this,所以 fn.call(this)
中的this是匿名函数的this。也就是说handle函数的this指向和匿名函数的this指向是一样的。
又因为匿名函数是addEventListener
方法的回调函数,addEventListener会使其回调函数的this指向btn,所以匿名函数的this指向btn。handle也跟着匿名函数也指向btn。
我们连续点击4下提交按钮:
最终成功纠正handle的this指向,指向btn。
var btn = document.getElementById('btn');
function handle() {
console.log('提交', this);
}
btn.addEventListener('click', debounce(handle))
function debounce(fn) {
let timer = null;
return function () {
const that = this
clearTimeout(timer)
timer = setTimeout(function () {
fn.call(that)
}, 1000)
}
}
我们找到匿名函数是addEventListener的回调函数,其this指向的是btn。我们可以证明一下。
证明:
var btn = document.getElementById('btn');
function handle() {
console.log('提交', this);
}
btn.addEventListener('click', handle)
结果是:
我们用that变量保存匿名函数的this指向,并且将handle的this指向显式绑定为匿名函数的this指向,也就是指向btn。
我们连续点击4下提交按钮:
最终成功纠正handle的this指向,指向btn。
输出addEventListener回调函数的事件对象(e):
var btn = document.getElementById('btn');
function handle(e) {
console.log('现在的事件对象', e);
}
btn.addEventListener('click', debounce(handle))
function debounce(fn) {
let timer = null;
return function (e) {
console.log('原来的事件对象', e);
clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this)
}, 1000)
}
}
点击提交按钮1次查看原来的事件对象(e)和最终输出的事件对象(e):
最终的事件对象被篡改了。我们需要纠正回来。
var btn = document.getElementById('btn');
function handle(e) {
console.log('现在的事件对象', e);
}
btn.addEventListener('click', debounce(handle))
function debounce(fn) {
let timer = null;
return function (e) {
console.log('原来的事件对象', e);
clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this, e)
}, 1000)
}
}
在 debounce函数内部的 setTimeout回调中,通过 fn.call(this, e)
,将原始事件对象e传递给了 handle 函数,这样就确保了handle函数接收到的是正确的事件对象。
点击一次提交按钮:
最终纠正了事件对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">提交</button>
<script>
var btn = document.getElementById('btn');
function handle(e) {
console.log('提交');
}
btn.addEventListener('click', debounce(handle))
function debounce(fn) {
let timer = null;
return function (e) {
clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this, e)
}, 1000)
}
}
</script>
</body>
</html>
在写防抖操作时,不要忘记了还原原函数的this指向和还原原函数的事件对象e。