下面是关于JavaScript防抖与节流的区别与实现的完整攻略。
防抖和节流都是针对一些高频率触发的事件而出现的优化方案。它们的基本思路都是减少一些重复触发导致的性能问题。
防抖:当一个用户连续地触发某个事件时,防抖会在一定时间内只执行一次该事件,如果在这个时间段内该事件再次被触发,则重置时间。可以理解为:事件被触发后,等待一段时间,如果这段时间内没有再次触发该事件,则执行该事件。防抖的应用场景:搜索联想,用户在输入时只有停止输入一段时间后才需要触发联想。
节流:当一个用户连续地触发某个事件时,节流会定期执行该事件,即使在这段时间内该事件再次被触发,也只会在这个定期时间到达后再次执行,不会重复执行。可以理解为:事件被触发后,每隔一定时间段后执行一次该事件。节流的应用场景:滚动条事件,每隔一段时间执行一次页面滚动时的位置计算。
下面是一个基本的防抖实现代码:
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
事件,但当用户连续输入时,需要等待一段时间后,才开始执行渲染搜索结果。
下面是一个基本的节流实现代码:
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))
在上面的示例中,当用户滚动到底部时,需要等待一段时间后再执行加载更多数据的操作,避免多次触发造成的性能问题。
在实际开发中,我们会根据实际场景选择防抖和节流的优化方案,避免不必要的重复执行而导致的性能问题。了解防抖和节流的实现可以更好地应对实际开发中的问题。
本文链接:http://task.lmcjl.com/news/8496.html