关键词

关于JavaScript防抖与节流的区别与实现

下面是关于JavaScript防抖与节流的区别与实现的完整攻略。

1. 防抖与节流的定义

防抖和节流都是针对一些高频率触发的事件而出现的优化方案。它们的基本思路都是减少一些重复触发导致的性能问题。

  • 防抖:当一个用户连续地触发某个事件时,防抖会在一定时间内只执行一次该事件,如果在这个时间段内该事件再次被触发,则重置时间。可以理解为:事件被触发后,等待一段时间,如果这段时间内没有再次触发该事件,则执行该事件。防抖的应用场景:搜索联想,用户在输入时只有停止输入一段时间后才需要触发联想。

  • 节流:当一个用户连续地触发某个事件时,节流会定期执行该事件,即使在这段时间内该事件再次被触发,也只会在这个定期时间到达后再次执行,不会重复执行。可以理解为:事件被触发后,每隔一定时间段后执行一次该事件。节流的应用场景:滚动条事件,每隔一段时间执行一次页面滚动时的位置计算。

2. 防抖与节流的实现

2.1 防抖的实现

下面是一个基本的防抖实现代码:

function debounce(fn, delay) {
  let timer
  return function() {
    clearTimeout(timer)
    // 确定执行时机
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

这段代码中的fn为需要执行的函数,delay为等待的时间。这里应用了闭包来保存一个定时器的变量timer,用来控制执行时机。

下面是一个搜索联想的实现示例:

const searchInput = document.querySelector('.search-input')
const searchResult = document.querySelector('.search-result')

searchInput.addEventListener('input', debounce(function(e) {
  const keyword = e.target.value
  // 当输入框的值为空时,隐藏搜索结果
  if (!keyword) {
    searchResult.style.display = 'none'
    return
  }
  // ajax请求相关数据并渲染搜索结果
  // ......
}, 300))

在上面的示例中,搜索输入框的中间态每输入一个字符,就会触发input事件,但当用户连续输入时,需要等待一段时间后,才开始执行渲染搜索结果。

2.2 节流的实现

下面是一个基本的节流实现代码:

function throttle(fn, delay) {
  let flag = true
  return function() {
    // 如果已经执行过该函数,则退出
    if (!flag) {
      return
    }
    // 确定执行时机
    flag = false
    setTimeout(() => {
      fn.apply(this, arguments)
      flag = true
    }, delay)
  }
}

这段代码中的fn为需要执行的函数,delay为等待的时间。这里应用了闭包来保存一个标志位flag,用来判断是否需要执行。

下面是一个网页滚动加载的实现示例:

const scrollWrapper = document.querySelector('.scroll-wrapper')
const listWrapper = document.querySelector('.list-wrapper')

scrollWrapper.addEventListener('scroll', throttle(function(e) {
  // 当滚动到底部时加载更多数据,避免多次触发
  if (scrollWrapper.scrollTop + scrollWrapper.clientHeight >= listWrapper.clientHeight) {
    // ajax请求加载更多数据
    // ......
  }
}, 1000))

在上面的示例中,当用户滚动到底部时,需要等待一段时间后再执行加载更多数据的操作,避免多次触发造成的性能问题。

3. 总结

在实际开发中,我们会根据实际场景选择防抖和节流的优化方案,避免不必要的重复执行而导致的性能问题。了解防抖和节流的实现可以更好地应对实际开发中的问题。

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

展开阅读全文