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))
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS防抖节流函数的实现与使用场景 - Python技术站