防抖函数是一种在高频事件触发后,n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间的函数。这种函数在处理一些需要高频触发DOM事件的地方非常有用,例如按钮点击,滚动条滚动等。
防抖函数的基本实现思路是这样的:
1. 每次触发事件时都取消之前的延时调用方法
2. 然后重新设置一个新的延时调用
这样的话,如果在一个事件被频繁触发的情况下,该方法只会在最后一次事件触发后的n秒才会执行。
let input = document.querySelector('input'); //获取input标签
function output() {
console.log(input.value);
}
function debonce(func, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
func.call(this)
}, delay)
}
}
input.addEventListener('input', debonce(output, 2000));
这个防抖函数接收两个参数:func是需要防抖的函数,delay是延时的时间。函数内部定义了一个变量timer,用来保存定时器的id。
这个防抖函数返回了一个新的函数。当这个新的函数被调用时,它首先会清除当前的定时器(如果存在的话),然后设置一个新的定时器,在delay毫秒后执行func函数。
这里的setTimeout函数中,func.call(this)确保了func函数在执行时this的指向。this在这里指的是调用防抖函数的上下文。因为setTimeout是window对象的方法,如果直接调用func(),那么func内部的this会指向window。通过使用call方法,我们可以将this的指向改为原来的上下文。
例如,如果我们在一个对象的方法中使用了这个防抖函数,那么this就会指向这个对象。这样我们就可以在func函数中正确地访问这个对象的属性和方法。
总结一下,这个防抖函数的运行过程是这样的:
1. 调用防抖函数,传入需要防抖的函数func和延时时间delay。
2. 防抖函数返回一个新的函数。
3. 当新的函数被调用时,清除当前的定时器,并设置一个新的定时器,在delay毫秒后执行func函数。
4. 如果在delay毫秒内,新的函数被再次调用,那么清除当前的定时器,并重新设置定时器。
5. 只有在最后一次调用新的函数后的delay毫秒后,func函数才会被执行。