防抖
-
定义:触发高频事件后n秒内函数只执行一次,如果n秒内高频事件再次触发,则重新计算时间
-
实现方式:每次触发时间时设置一个延时调用的方法,并且取消之前的延时调用方法
-
缺点:如果事件在规定时间间隔内不断被触发,则调用方法会被不断延迟
// 防抖 function debounce(fn, wait) { var timeout = null; return function () { if (timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait); } } // 处理函数 function handle() { console.log(Math.random()); } // 滚动事件 window.addEventListener('resize', debounce(handle, 100));
节流
- 定义:高频事件触发,但是n秒内只会执行一次,会稀释函数的执行频率
- 实现方式:每次触发事件时,如果当前有等待执行的延迟函数,直接return
```
//节流
function throttle(fn,wait) {
let flag = true;
return function () {
if(!flag) return ;
flag = false;
setTimeout(()=>{
fn.apply(this,arguments);
flag = true
},wait)
}
}
//处理函数
function handle(){
console.log(Math.random());
}
//触发事件
window.addEventListener("resize",throttle(handle,500))
```