JS防抖节流函数的实现与使用场景

什么是JS防抖和节流？

• 防抖：是指在一段时间内，多次触发同一事件，只执行一次函数。即当一连串的操作被触发时，只有最后一个操作被执行而前面的操作都被忽略了。
• 节流：是指在一段时间内，多次触发同一事件，只执行一次函数。即在规定的时间内，重复触发只会响应一次，并阻止事件触发后一段时间内的操作。

防抖函数实现及使用场景

实现

function debounce(fn, delay) {
  let timer = null
  return function () {
    let context = this
    let args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

防抖的原理是使用定时器，在规定时间内只执行一次函数，如果在规定时间内被多次调用，则会清除之前的计时器，重新开始计时。

使用场景

输入框实时搜索是常用的防抖场景。还有一些需要频繁操作DOM的事件，如窗口的调整、滚动条的移动等操作，为了防止频繁操作导致页面卡顿，可以使用防抖函数来控制事件的执行。

// 输入框实时搜索
const input = document.querySelector('#input')
input.addEventListener('input', debounce(function() {
  // 搜索相关逻辑
}, 500))

节流函数实现及使用场景

实现

Throttle

function throttle(fn, delay) {
  let lastTime = 0
  return function () {
    let now = Date.now()
    if (now - lastTime > delay) {
      fn.apply(this, arguments)
      lastTime = now
    }
  }
}

Throttle的原理是在规定时间内，防止函数无限制地执行，只有在规定时间之后才能触发下一次函数的执行。

Leading Throttle

function leadingThrottle(fn, delay) {
  let lastTime = 0, firstTime = true
  return function () {
    let now = Date.now()
    if (firstTime || (now - lastTime > delay)) {
      fn.apply(this, arguments)
      lastTime = now
      firstTime = false
    }
  }
}

Leading Throttle的特点是第一次调用立即执行，然后在规定时间内才能触发下一次函数执行。

Tailing Throttle

function trailingThrottle(fn, delay) {
  let lastTime = 0, timer = null
  return function () {
    let now = Date.now()
    let diff = now - lastTime
    if (diff >= delay) {
      clearTimeout(timer)
      timer = null
      lastTime = now
      fn.apply(this, arguments)
    } else if (!timer) {
      timer = setTimeout(() => {
        timer = null
        lastTime = Date.now()
        fn.apply(this, arguments)
      }, delay - diff)
    }
  }
}

Tailing Throttle和Leading Throttle不一样的地方在于，首次不会立即执行，而是在下一次执行的时候将上一次未执行的操作一起执行。

使用场景

在一些频繁触发的场景下使用节流函数能够减少函数执行的频率，从而提高页面性能。

// 窗口resize事件
window.addEventListener('resize', throttle(function() {
  // 处理DOM相关操作
}, 500))

在滚动时计算需要出现的元素数量时，使用Tailing Throttle能够在滚动结束时将所有需要出现的元素一起计算。

// 滚动时计算需要出现的元素数量
window.addEventListener('scroll', trailingThrottle(function() {
  // 计算需要出现的元素数量，并显示
}, 500))

本文链接：http://task.lmcjl.com/news/8480.html