js防抖,即时执行和延时执行
函数防抖动(debounce)
防止在短时间内过于频繁的执行相同的任务。 当短时间内的频繁是不必要的时候,就可以考虑去抖动,避免资源浪费,或造成不好体验。
短时间内多次点击登陆,发送短信等请求数据操作时 文本编辑器一段时间不操作,进行自动保存 搜索框进行联想,用户不断输入值,只在停顿1s时才进行联想。
函数防抖动的原理,主要是利用一次性定时器,延迟任务的执行,在延迟这段时间内, 如果任务再次被触发,则通过 clearTimeout 销毁上一次产生的定时器, 因为定时器的被销毁,之前被延迟执行的任务也会随之被取消执行。这一次的执行通常是最后一次的触发。
即时执行
在定时时间之外,每次触发都立即执行
function debounce(func, wait, immediate) {
let timeout
return function debounced(...args) {
const ctx = this
if (timeout) clearTimeout(timeout)
if (immediate) {
const callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) func.apply(ctx, args)
} else {
timeout = setTimeout(() => {
func.apply(ctx, args)
}, wait)
}
}
}
延时执行
每次触发,需要等待固定时间,这段时间没触发就执行,触发后就以最后触发的时间延时后执行
function debounce(func, wait) {
let timeout = null
return function debounced(...args) {
const ctx = this
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(ctx, args)
}, wait)
}
}
版权声明:
作者:wuhou123
链接:https://wuhou.fun/499.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论