【前端面试题js-2】理解防抖函数

理解

js的防抖节流函数是闭包的实际应用。

防抖函数

当持续触发事件，一定时间内没有再触发事件，事件处理函数才会执行一次；

如果设定的时间到来之前，又一次触发了事件，就重新开始延时（即重新开始定时器，清除上一次还没有结束的定时器）。

function debounce(callback,delay) {
let timer
return function() {
clearTimeout(timer)
//存储timer变量，清除setTimeout,闭包
timer=setTimeout(function(){
console.log(value)
},delay)
}
}

实际应用

输入搜索：输入n秒才进行搜索请求，n秒内又输入的内容，又重新计时。

扩展：节流函数

当持续触发事件的时候，保证一段时间内，只调用一次事件处理函数。

实际应用

表单提交：鼠标不断点击触发，规定在n多秒内多次点击只有一次生效。