节流函数的不同实现

节流函数的不同实现

限定最短执行间隔

const throttle = (func, wait = 1000) => {
  let time = new Date().valueOf()
  return () => {
    const now = new Date().valueOf()
    if (now - time > wait) {
      func()
      time = now
    }
  }
}

这样做的好处是可以限定两次调用的最短间隔，但缺点也很明显，函数的响应变的卡顿。

使用 requestAnimationFrame 实现

const throttle = (action) =>  {
  let isRunning = false
  return () => {
    if (isRunning) return
    isRunning = true
    window.requestAnimationFrame(() => {
      action()
      isRunning = false
    })
  }
}

通过 requestAnimationFrame 实现就可以避免两次调用的卡顿，使节流后的函数调用依然流畅。