防抖
1、多种不同的解释(定义)
1、短时间内多次触发,最终在停止触发后的某个指定时间执行一次函数,
只执行一次
。
2、防抖: 指触发事件n
秒后才执行函数,如果在n
秒内又触发事件,则会重新计算函数执行时间。
3、防抖是n
秒内重复的触发会导致重新计时,直到n
秒内没有重复触发函数才会执行。
2、示例1-监听滚动条
let timer;
window.onscroll = function() {
// 如果当前 timer 不是 undefined ,
// 说明前面有一个等待的请求还未发送,
// 就停止前面的等待
if (timer !== undefined) clearTimeout(timer);
// 再重现下一轮等待
timer = setTimeout(function() {
// 当 500ms 内,未发生滚动时,
// 才发送正式的 ajax 请求
console.log('发送ajax请求');
}, 500);
};
3、示例2-按钮点击
<button id="btn">防抖</button>
// 500 毫秒内多次触发只会执行一次
function clearT() {
let timer;
return function() {
// 如果 500 毫秒内又一次触发,
// 则会重新计算时间
// if (timer) clearTimeout(timer):
// 相当于清除定时器并且 return
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
console.log('发送请求');
}, 500);
}
}
// document.querySelector('#btn'): 通过 id 获取元素
// addEventListener('click', clearT()): 给元素添加监听事件 clearT()
document.querySelector('#btn').addEventListener('click', clearT());
节流
1、多种不同的解释(定义)
1、短时间内多次触发,即使触发仍在继续也可以根据指定。时间触发一次函数 —
至少执行一次
。
2、节流: 指连续触发事件,但是在n
秒中只执行一次函数。 节流会稀释函数的执行频率。
3、节流是n
秒内只会执行第一次触发的函数,重复的触发无效。
2、示例1 - 按钮点击
<button id="btnThrottle">节流</button>
// 初次点击按钮可以触发请求
let canClick = true;
// 给按钮元素绑定点击事件
document.getElementById('btnThrottle').onclick = function() {
// 点击第一次发送请求
if (canClick) {
// 发送请求立即给 canClick 赋值为 false
canClick = false;
console.log('发送ajax请求');
setTimeout(() => {
console.log('加载完成!');
// 等请求返回响应才可以发送第二次
canClick = true;
}, 1000);
}
};