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
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
js防抖,即时执行和延时执行
函数防抖动(debounce) 防止在短时间内过于频繁的执行相同的任务。 当短时间内的频繁是不必要的时候,就可以考虑去抖动,避免资源浪费,或造成不好体验。 短……
< <上一篇
下一篇>>
文章目录
关闭
目 录