函数节流
限制一个函数在一定时间内只能执行一次。忽略在当前时间段内其他的事件触发。
- 使用场景
- 如鼠标的滚轮事件。
- 高频输入的远程搜索输入框。
- 表单确定按钮的点击处理事件。
- 代码举例
- setTimeout
- 判断本次与上次执行的时间间隔。在wait时间段内,则不执行。超过wait则执行。
let canPushToStack = true;
window.addEventListener('scroll',function(){
canPushToStack = false;
setTimeout(function(){
console.log('我滚动了');
canPushToStack = true;
},1000)
})
function throttle(func, wait) {
let canStack = true;
return function (...rest) {
if (canStack) {
setTimeout(() => {
func.apply(this, rest);
canStack = true
}, wait);
}
canQueue = false
}
}
function throttle(func, wait) {
let last = 0;
return function (...rest) {
let now = +new Date();
if (now - last > wait) {
last = +new Date()
func.apply(this, rest)
}
}
}
函数防抖
指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
- 使用场景
- 搜索输入框,用户最后一次输完,再发请求。
- 手机号,邮箱验证的输入检测。
- 窗口大小resize事件,只需窗口调整完成后,计算窗口大小。防止重复渲染。
- 代码示例。
window.addEventListener('scroll',function(){
if(this.timer){
clearTimeout(this.timer);
}
this.timer = setTimeout(function(){
console.log('我正在执行');
},1000)
})
function debounce(func, wait) {
let timer;
return function (...rest) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(this, rest)
}, wait)
}
}