简单的防抖和节流,适合工作的时候用,对于函数的传参有意识的传入正确的参数即可
// 防抖函数
const debounce = (fn, wait) => {
let timer = null
return function () {
let context = this,
args = arguments
if (timer) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
fn.apply(context, args)
}, wait)
}
}
// 节流函数
const throttle = (fn, delay) => {
let curTime = Date.now()
return function () {
let context = this,
args = arguments,
nowTime = Date.now()
if (nowTime - curTime >= delay) {
curTime = Date.now()
return fn.apply(context, args)
}
}
}
复杂一点的防抖节流,适合封装,给一群乱七八糟喜欢瞎传参的人用
/* 函数的防抖和节流 */
const clearTimer = function clearTimer(timer) {
if (timer) clearTimeout(timer);
return null;
};
const debounce = function debounce(func, wait, immediate) {
if (typeof func !== "function") throw new TypeError("func is not a function!");
if (typeof wait === "boolean") {
immediate = wait;
wait = undefined;
}
wait = +wait;
if (isNaN(wait)) wait = 300;
if (typeof immediate !== "boolean") immediate = false;
let timer = null;
return function operate(...params) {
let now = !timer && immediate;
timer = clearTimer(timer);
timer = setTimeout(() => {
if (!immediate) func.call(this, ...params);
timer = clearTimer(timer);
}, wait);
if (now) func.call(this, ...params);
};
};
const throttle = function throttle(func, wait) {
if (typeof func !== "function") throw new TypeError("func is not a function!");
wait = +wait;
if (isNaN(wait)) wait = 300;
let timer = null,
previous = 0;
return function operate(...params) {
let now = +new Date(),
remaining = wait - (now - previous);
if (remaining <= 0) {
func.call(this, ...params);
previous = +new Date();
timer = clearTimer(timer);
} else if (!timer) {
timer = setTimeout(() => {
func.call(this, ...params);
previous = +new Date();
timer = clearTimer(timer);
}, remaining);
}
};
};