防抖:
函数防抖(debounce):指在一定时间内,如果事件重复触发,则只执行第一次操作或者最后一次操作。即当一个函数频繁触发时,只有等到触发的间隔时间超过了指定的时间,函数才会执行一次,保证只执行一次。
先执行防抖
let obj;
content.onmousemove = function (){
let obj = times;
clearTimeout(times);
times = setTimeout(()=>{
times = null;
},1000)
if(!obj){
//需要执行的函数
func();
}
};
function func(){
console.log(111111);
}
后执行防抖
function debounce(fn, delay) {
let time = null;
return function() {
clearTimeout(time);
time = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
document.bady.onmousemove =debounce(执行函数,时间);
节流
函数节流(throttle):指在一定时间内,无论事件触发多少次,只会执行一次操作。即当一个函数频繁触发时,在指定时间内只会执行一次,保证稳定的执行效果。
延时器:
原理 就是利用time值的来回转换,在每隔一定时间改变一次值
function throttle(fn, delay) {
let time;
return function(){
if(!time){
time = setTimeout(()=>{
time = null;
fn.apply(this, arguments);
},delay)
}
}
}
document.bady.onmousemove = handleScroll(执行函数,时间)