函数防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
// 模拟一段ajax请求
function ajax (content) {
console.log('ajax request' + content)
}
let input = document.getElementById('unDdebounce')
input.addEventListener('keyup', function (e) {
ajax(e.target.value)
})
上面代码会出现,只要按下键盘就会触发ajax请求,不仅从资源上来说是很浪费的行为,而且实际应用中,用户也是输出完整信息后,才会请求,下面我们优化下:
// 模拟一段ajax请求
function ajax (content) {
console.log('ajax request' + content)
}
function debounce(fun, delay=500) {
return function (args) {
let that = this
let _args = args
clearTimeout(fun.id)
fun.id = setTimeout(function() {
fun.call(that, _args)
}, delay)
}
}
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener('keyup', function (e) {
debounceAjax(e.target.value)
})
上面代码可以看到,加入防抖后,当你在频繁的输入时,并不会发送请求,只有当你在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内有输入,会重新出发计时。
函数节流(throttle):规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发对此函数,只有一次生效。
看一个例子:
function throttle(fn, delay=200) {
let last, timer
return function (args) {
let that = this
let _args = args
let now = + new Date()
if (last && now < last + delay) {
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(that, _args)
}, delay)
} else {
last = now
fn.apply(that, _args)
}
}
}
let throttleAjax = throttle(ajax, 1000)
let inputc = document.getElementById('throttle')
inputc.addEventListener('keyup', function (e) {
throttleAjax(e.target.value)
})
可以看到,我们在不断输入时,ajax会按照我们设定的时间,每1s执行一次。
总结
函数防抖和函数节流都是防止在某一时间频繁触发,但是原理不一样。
函数防抖是某一时间段内值只执行一次,而函数节流是间隔时间执行。