1、函数防抖
函数防抖动是在一定时间内函数只执行一次,如果在这个时间内又触发了函数,则重新计算时间;
const _.debounce = (func, wait) => {
let timer;
return () => {
clearTimeout(timer);
timer = setTimeout(func, wait);
};
};
2、函数节流
函数节流是在一定时间内只执行一次 1)、setTimeout实现方法
const _.throttle = (func, wait) => {
let timer;
return () => {
if (timer) {
return;
}
timer = setTimeout(() => {
func();
timer = null;
}, wait);
};
};
2)、时间戳版简单实现
const throttle = (func, wait) => {
let last = 0;
return () => {
const current_time = +new Date();
if (current_time - last > wait) {
func.apply(this, arguments);
last = +new Date();
}
};
};
3)、requestAnimationFrame实现方法 requestAnimationFrame的原理是浏览器每次刷新的间隔去执行函数,用该方法实现节流,即每次浏览器刷新一次执行一次函数;如每次浏览器刷新的时候执行scroll、resize方法等;