Javascript函数的防抖和节流

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript函数的防抖和节流相关的知识,希望对你有一定的参考价值。

防抖

防抖防抖 防止手抖

就是在某段时间内触发多次事件,只执行最后一次。

例如百度搜索联想,只会联想最后输入的字符

function resizeEvent (content) {
  console.log(`window`+content)
}

let event = debounce(resizeEvent, 500)

function debounce(func, delay) {
  let timeOut = null
  return (args) => {
    if (timeOut !== null) {
      // 清除上一次定时器,重新计时
      clearTimeout(timeOut)
    }
    timeOut = setTimeout(() => {
      func(args)
    }, delay)
  }
}
// 调整浏览器窗口大小时,触发事件
addEventListener(\'resize\', ()=>{event(1)})

应用:

1.search联想,在用户不断输入值的时候,节约请求资源,确保联想正确

2.window resize事件,防抖让其只触发一次

节流

在一段时间内触发多次事件,函数在每一个间隔时间后执行一次。

例如 fps游戏中 一直按着鼠标, 冲锋枪子弹按照一定速度连发

function resizeEvent (content) {
  console.log(`window`+content)
}

let event = throttle(resizeEvent, 500)

function throttle(func, delay) {
  let last = null
  let deferTimer = null
  return (args) => {
    let now = new Date().getTime()
    if (last && now < last + delay) {
     // 未到间隔时间,清除定时器
      clearTimeout(deferTimer)
      deferTimer = setTimeout(()=> {
      // 重新新建定时器,等待间隔时间以后置位last,执行功能函数
        last = now
        func(args)
      }, delay)
    } else {
      // 第一次或者已超过间隔时间
      last = now
      func(args)
    }
  }
}
// 调整浏览器窗口大小时,触发事件
addEventListener(\'resize\', ()=>{event(1)})

应用:

1.鼠标不断点击触发某功能,mousedown(单位时间内只触发一次)

2.鼠标不断移动触发某功能,mousemove(单位时间内只触发一次)

总结

防抖和节流

相同点都是为了解决短时间内大量触发某函数而导致的性能问题。

不同点是根据不同的业务需求,实现的原理不同。

 

有问题可以一起探讨,欢迎关注公众号 小覃笔记

以上是关于Javascript函数的防抖和节流的主要内容,如果未能解决你的问题,请参考以下文章

javascript的防抖和节流深入理解

来聊聊JavaScript中的防抖和节流

lodash的防抖和节流方法

事件的防抖和节流

一文读懂函数的防抖和节流

函数的防抖和节流