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(单位时间内只触发一次)

总结

防抖和节流

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

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

 

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