防抖
触发高频事件后 n 秒内只会执行一次,如果 n 秒内再次触发,则重新计算
- 思路
- 每次触发事件存一个定时器;
- 每次触发前,先清空之前的定时器.
- 实现上次事件未触发,就不去触发,清空.执行之后的事件
function debounce(fn){
let timeout = null;
return function(){
clearTimeout(timeout);
timeout = setTimeout(()=>{
fn.apply(this,arguments)
},500)
}
}
function sayHi(){
console.log('Hi~ o(*￣▽￣*)ブ')
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi));
节流
高频触发事件,在 n 秒内只会执行一次,多次触发不会多次执行
- 思路
- 每次触发事件前,判断是否之前的事件已完成,如果完成,就不继续了
function throttle(fn){
let canRun = true;
retrun function(){
if(!canRun) return ; //判断上次事件是否执行完毕
canRun = false; //执行事件 ,置为 false
setTimeout(()=>{
fn.apply(this,arguments);
canRun = true; // 执行结束够,置为 true,允许下次触发执行
},500);
}
}
function sayHi(e){
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
