简单防抖节流 - 图1

防抖函数(debounce)

防抖函数原理:在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时。

  1. function debounce (fn, time) {
  2. let timer = null
  3. return (...args) => {
  4. clearTimeout(timer)
  5. timer = setTimeout(() => {
  6. fn.apply(this, args)
  7. }, time)
  8. }
  9. }

节流函数(throttle)

防抖函数原理:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

  1. function throttle (fn, time) {
  2. let inTime = false
  3. return (...args) => {
  4. if (inTime) return
  5. inTime = true
  6. setTimeout(() => {
  7. fn.apply(this, args)
  8. inTime = false
  9. }, time)
  10. }
  11. }