防抖函数(n秒后执行)
事件触发后延迟执行,输入期间不执行触发操作,无操作及延迟时间过后触发,一般适用于频繁触发的操作,原理是用setTimeout函数达到延迟效果,连续操作时使用clearTimeout函数不断清除定时器,重置延迟时间,阻止连续触发。
let inp = document.getElementById("inp")
var timeout;
inp.oninput = function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
console.log(this.value)
},1000)
}
拿input输入框举例,每次输入值不会立打印输出,停止输入1秒后打印输出结果。
节流函数(n秒内只执行一次)
顾名思义节流,就是节制的意思,能省就省。写法与防抖函数类似,都是使用定时器,不过它们还是有差别的。防抖函数是连续输入值触发清除定时器来阻止,文本框一直输入值,是不会触发的,只有停止输入后1秒才会触发。而节流函数是规定一段时间内无法触发,时间过了才触发,即使不断输入值,但只要1秒钟过了,也会触发。
let inp = document.getElementById("inp")
var timeout
let flag = true
inp.oninput = function () {
if (!flag) {
return
}
flag = false
timeout = setTimeout(() => {
console.log(123)
flag = true
}, 1000)
}