前言
最近项目是遇到了用户频繁操作的问题,最后使用了函数的节流来防止用户误操作,特此记录一下函数节流和防抖
节流(throttle)
原理:在一定时间间隔内,只会执行一次方法。相当于把一定时间间隔内的频繁触发的事件,合成一次调用。就像resize这类频繁触发的事件,对于浏览器的性能消耗很大,使用节流函数,以此降低事件触发的频率
实现方式有两种:时间戳 和 setTimeout
// 时间戳的方式
function throttle1(fn, delay = 500) {
let lastTime = 0;
return function (...args) {
let currentTime = new Date();
if(currentTime - lastTime > delay || !lastTime) {
fn.apply(this, args);
lastTime = currentTime;
}
}
}
// setTimeout的方式
function throttle2 (fn, delay = 500) {
let timer = null;
return function (...args) {
if(!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
clearTimeout(timer);
}, delay)
}
}
}
防抖(debounce)
原理:任务频繁触发的情况下,只有触发的间隔超过指定间隔的时候,任务才会执行(即仅仅只会执行一次)。意思就是你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行。总之,就是要等你触发完事件 n 秒内不再触发事件后,才执行。
function debounce(fn, interval = 500) {
let timer = null;
return function () {
let context = this;
let args = agruments;
clearTimeout(timer); // 每次调用debounce函数,会将前一次timeout清空,确保只会执行一次
timer = setTimeout(() => {
fn.apply(context, args)
}, interval)
}
}