防抖(debounce)
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,
如果在 n 秒内又触发了事件,则会重新计算函数执行时间
document.documentElement.addEventListener('mousemove', fnName());
function debounce(){
let time = null;
return function(){
if(time){clearTimeout(time); time=null;}
time = setTimeout(()=>{
//要执行的函数
console.log('欧克')
time=null;
},500)
}
}
节流(throttle)
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数
节流会稀释函数的执行频率。提升性能
节流,一般有两种方式可以实现,分别是时间戳版和定时器版。
定时器版本 …2种一样,只是思路不一样
定时器版本第一种
function throttle(){
let time = null;
return function(){
if(time) return;
time = setTimeout(()=>{
console.log('ok')
//要执行的函数
time=null;
},500)
}
}
定时器版本第二种
function throttle() {
let starttime = 0;
return function () {
let endtime = Date.now();
//注意这个是以毫秒为单位
if (endtime-starttime>1000) {
starttime = endtime;
setTimeout(() => {
console.log('ok');
}, 1000)
}
}
}