节流
节流的意思是,规定时间内,只触发一次。比如我们设定500ms,在这个时间内,无论点击按钮多少次,它都只会触发一次。具体场景可以是抢购时候,由于有无数人 快速点击按钮,如果每次点击都发送请求,就会给服务器造成巨大的压力,但是我们进行节流后,就会大大减少请求的次数。
防抖
防抖的意思是,在连续的操作中,无论进行了多长时间,只有某一次的操作后在指定的时间内没有再操作,这一次才被判定有效。具体场景可以搜索框输入关键字过程中实时 请求服务器匹配搜索结果,如果不进行处理,那么就是输入框内容一直变化,导致一直发送请求。如果进行防抖处理,结果就是当我们输入内容完成后,一定时间(比如500ms)没有再 输入内容,这时再触发请求。
// 防抖 且首次执行
// 采用原理:第一操作触发,连续操作时,最后一次操作打开任务开关(并非执行任务),任务将在下一次操作时触发)
function debounceStart() {
let immediate = true
let movement = null
return function () {
// 开关打开时,执行任务
if (immediate) {
console.log(1);
immediate = false
}
// 清空上一次操作
clearTimeout(movement)
// 任务开关打开
movement = setTimeout(function () {
immediate = true
}, 2000)
}
}
var fn = debounceStart()
el.onclick = function () {
fn()
}
// 防抖 尾部执行
// 采用原理:连续操作时,上次设置的setTimeout被clear掉
function debounceTail() {
let movement = null
return function () {
// 清空上一次操作
clearTimeout(movement)
// 2s 之后,任务执行
movement = setTimeout(function () {
console.log(1);
}, 2000)
}
}
var fn = debounceTail()
el.onclick = function () {
fn()
}
// 节流,2s的时间执行一次,通过开关控制
function throttle() {
let isAvail = true
return function () {
if (isAvail) {
console.log(1);
isAvail = false // delay时间之后,任务开关打开
setTimeout(function () { isAvail = true }, 2000)
}
}
}
var fn = throttle()
el.onclick = function () {
fn()
}
// 或者采用自执行匿名函数写法(声明并调用)
(function () {
let isAvail = true
el.onclick = function () {
if (isAvail) {
console.log(1);
isAvail = false // delay时间之后,任务开关打开
setTimeout(function () { isAvail = true }, 2000)
}
}
})()