防抖的三种形式

高性能节流函数实现与应用

最新推荐文章于 2024-08-01 12:18:43 发布

原创最新推荐文章于 2024-08-01 12:18:43 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

js 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了三种节流函数的实现方式：时间戳、定时器和综合实现，详细解析了它们的工作原理和特点。时间戳实现确保执行与触发同步，定时器实现则将执行延迟，而综合实现兼顾二者，确保最后一次触发一定会执行。这些节流技术在高频率触发事件处理中起到关键作用，保证了代码执行的稳定性和效率。

时间戳实现

当触发时间相加大于500毫秒时执行
触发和执行同时
无法保证最后一次触发一定执行

function throttle(callback, duration = 500) {
  let prevTime = Date.now()
  return function () {
    let now = Date.now()
    if (now - prevTime > duration) {
      callback()
      prevTime = now
    }
  }
}
//  模拟触发
let initTime = Date.now()
setInterval(throttle(function () {
  console.log(Date.now() - initTime)
}), 300)
// 触发时间 300 600 900 1200 ...
// 执行时间 600 1200 1800 2400...

定时器实现

执行在触发后500毫秒
300时触发800时执行，之后最近一次触发是900,触发后1400执行
无法保证最后一次触发一定执行

function throttle(callback, duration = 500) {
  let timer = null
  return function () {
    if (!timer) {
      timer = setTimeout(function () {
        callback()
        timer = null
      }, duration)
    }
  }
}
//  模拟触发
let initTime = Date.now()
setInterval(throttle(function () {
  console.log(Date.now() - initTime)
}), 300)
// 触发时间 300 600 900 1200 ...
// 执行时间 800 1400 2000...

综合实现

最后一次触发一定执行
执行稳定，执行随触发时间和延时中最大的值

function throttle(callback, duration = 500) {
  let timer = null;
  let prevTime = Date.now()
  return function () {
    if (timer) clearInterval(timer)
    let curTime = Date.now()
    let time = duration - (curTime - prevTime)
    if (time <= 0) {
      callback.apply(this, arguments)
      prevTime = Date.now()
    } else {
      timer = setTimeout(() => {
        callback.apply(this, arguments)
        prevTime = Date.now()
      }, time)
    }
  }
}
//  模拟触发
let initTime = Date.now()
setInterval(throttle(function () {
  console.log(Date.now() - initTime)
}), 300)
// 触发时间 300 600 900 1200 ...
// 执行时间 500 1000 1500 2000...