js防抖函数的使用

JavaScript09

js防抖函数的使用,第1张

function debounce(func, delay) {

let timer

//当前的this是指向window

return function (...args) {

//当前的this是指向dom元素

if (timer) {

clearTimeout(timer)

}

timer = setTimeout(() =>{

func.apply(this, args)

}, delay)

}

}

例：<div id="test">点击</div>

实现隔3s执行一次的操作：

document.getElementById('test').addEventListener('click', debounce(function() {

console.log('执行完成之后的动作')

}, 3000))

记：事件回调函数里的this指向触发当前事件的DOM元素

2022.3.19补充

节流函数的另一种实现方式：

两者的区别：

防抖函数：在一定时间内执行一个方法多次，只执行最后一次。因为在事件触发会先清理timer，如果时间间隔不到则会被清理掉，只有你的间隔到了之后才会执行，因此前面的函数都会被清理掉。

节流函数：在一定时间内执行一个方法多次，只有第一次生效。因为在事件触发后会先判断timer是否存在，只有不存在的时候才会执行。

相当于防抖是强制清理，节流是不到时间进不了大门。

答：不管触发多少次事件，都会等到事件触发 **n 秒后 **才会执行，如果在事件触发的 n 秒内 又触发了这个事件，那么就以新的事件的时间为准重新计算，总之，就是要等你触发事件 n 秒内 不再触发事件，我才会执行，一般用在用户表单输入实时搜索上