主要作用就是限制事件的频繁发送
防抖和节流的定义
-
防抖:在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行
-
例如: input输入信息,不可能每次按下都发起一个ajax请求,可以等一段时间内不输入了之后在发起请求
-
规定时间内操作时,新的事件会覆盖旧的事件,超过这个时间才会触发
-
-
节流:在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次出发
-
例如: 验证码60秒内不可以再次触发(实际开发肯定是使用禁止,但是原理和验证码一样)
-
规定时间内操作时,新的事件必须要等到旧的事件触发介绍,只有等到规定事件介绍才能触发新的事件
-
防抖
const inputEl = document.querySelector("input")
inputEl.oninput = debounce(function () {
console.log(this.value);
}, 500)
function debounce(fn, s) {
let time = null
return function () {
if (time !== null) {
clearTimeout(time)
}
time = setTimeout(() => {
console.log(this);
fn.call(this)
}, s)
}
}
节流
window.onscroll = throttle(function () {
console.log('等待0.5秒才能操作');
}, 500)
function throttle(fn, s) {
let flag = true
return function () {
if (flag) {
setTimeout(() => {
fn.call(this)
flag = true
}, s)
}
flag = false
}
}