Study NoteAppearance
防抖和节流
防抖：n 秒内函数只会执行一次，若在 n 秒内被重复触发，则重新计时
javascript
function debounce(func, wait) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, wait);
}
}
该函数接受两个参数：要执行的函数 func 和等待时间 wait。返回一个函数，当该函数被调用时，会使用 setTimeout 设置一个定时器，等待 wait 毫秒后执行 func 函数，如果在等待时间内该函数被再次调用，就会清除之前的定时器，重新设置一个新的定时器。这样就可以防止在短时间内多次触发事件，只有等到最后一次事件完成后才会执行函数。
节流：n 秒内只运行一次，若在 n 秒内重复触发，只执行一次
javascript
function throttle(func, wait) {
let timer;
let lastTime = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastTime < wait) {
clearTimeout(timer);
timer = setTimeout(() => {
lastTime = now;
func.apply(this, args);
}, wait);
} else {
lastTime = now;
func.apply(this, args);
}
}
}
该函数也接受两个参数：要执行的函数 func 和等待时间 wait。返回一个函数，当该函数被调用时，会判断当前时间与上一次执行函数的时间差是否小于等待时间 wait，如果是，就清除定时器，并设置一个新的定时器，在等待时间后执行函数；如果不是，就直接执行函数，并记录当前时间作为上一次执行函数的时间。这样就可以控制函数的执行频率，避免事件被频繁触发而导致函数被频繁调用。