前言:
节流和防抖是面试中,常问的问题,那接下来就来分析一下,防抖和节流。
一、节流
定义:在规定的时间内,无论触发多少次,都只执行一次
主要思路利用时间戳判断,每次调用判断和上一次调用的时间差异确定是否需要调用。 throttle实际是一个工厂函数,可以将一个函数封装为一个带有节流功能的函数。
module.exports.throttle = (fn, delay) => {
// 定义上次触发时间
let last = 0;
return (...args) => {
const now = + Date.now();
console.log("call", now, last, delay);
if (now > last + delay) {
last = now;
fn.apply(this, args);
}
};
};
二、防抖
定义:在规定的时间内,如果触发了,那时间将会重新计算
实现的话可以使用定时器执行函数,新调用发生时如果旧调用没有执行就清除之前的定时器。
/**
* 防抖Debounce
*/
module.exports.debounce = (fn, delay) => {
let timer;
return (...args) => {
// 判断定时器是否存在,清除定时器
if (timer) {
clearTimeout(timer);
}
// 重新调用setTimeout
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};
|
|