防抖
觸發(fā)高頻事件后 n 秒內(nèi)只會(huì)執(zhí)行一次,如果 n 秒內(nèi)再次觸發(fā),則重新計(jì)算
- 思路
- 每次觸發(fā)事件存一個(gè)定時(shí)器;
- 每次觸發(fā)前,先清空之前的定時(shí)器.
- 實(shí)現(xiàn)上次事件未觸發(fā),就不去觸發(fā),清空.執(zhí)行之后的事件
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));
節(jié)流
高頻觸發(fā)事件,在 n 秒內(nèi)只會(huì)執(zhí)行一次,多次觸發(fā)不會(huì)多次執(zhí)行
- 思路
- 每次觸發(fā)事件前,判斷是否之前的事件已完成,如果完成,就不繼續(xù)了
function throttle(fn){
let canRun = true;
retrun function(){
if(!canRun) return ; //判斷上次事件是否執(zhí)行完畢
canRun = false; //執(zhí)行事件 ,置為 false
setTimeout(()=>{
fn.apply(this,arguments);
canRun = true; // 執(zhí)行結(jié)束夠,置為 true,允許下次觸發(fā)執(zhí)行
},500);
}
}
function sayHi(e){
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
