理解js中的防抖与节流
防抖(debounce)
- 概念:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。如下图,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件。
- 举例:电脑一段时间(假设10分钟)不操作之后会自动息屏,当你在10分钟只能操作了电脑,那么这个息屏时间会重新计算(重新从10分钟倒计时)。
- 应用场景:搜索框检索,当用户在不停的输入内容时,此时不发送ajax请求,只有当用户在输入完内容后的一段时间后(一般是300ms),才发送请求,好处是能降低服务器的压力。
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
节流(throttle)
- 概念:当持续触发事件时,一定时间段内,该事件处理函数只会执行一次,如果设定的时间到来之后,才会再一次触发处理函数。如下图,持续触发scroll事件时,每1000毫秒执行一次handle函数。
- 举例:当监听页面的滚动事件时,我们只需要某个函数每5秒执行一次。
- 应用场景:计算鼠标移动距离。
function throttle(fn, gapTime) {
let _lastTime = null;
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn();
_lastTime = _nowTime
}
}
}
let fn = ()=>{
console.log('boom')
}