一、防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
思路:
每次触发事件时都取消之前的延时调用方法
function debounce(fn,delay){
let timer;
return (()=>{
if(timer){
clearTimeout(timer);
}
timer = setTimeout(fn,delay);
})
}
function setXY () {
console.log('1')
}
function clickbtn(){
debounce(setXY,1000)
}
二、节流
高频事件触发,但在n秒内只会执行一次
思路:
每次触发事件时都判断是否到达一定时间再触发函数。可用定时器或校验时间戳实现
定时器
function throttle (fn, delay) {
var timer = null;
return function() {
if (!timer) {
timer = setTimeout(function() {
fn();
timer = null;
}, delay);
}
}
}
function handle() {
console.log('Hello world');
}
window.addEventListener('click', throttle(handle, 1000));
应用场景:
防止用户连续多次点击提交表单、监听滚动、窗口大小、输入框内容校验等高频事件