节流防抖
js
// 每隔单位时间，只执行一次
function throttle(fn, delay = 500) {
let t = null;
return (...args) => {
if (t) return;
t = setTimeout(() => {
fn(...args);
t = null;
}, delay);
};
}
const obj = { msg: "obj", time: Date.now() };
const fn = function (arg) {
let delay = Date.now() - this.time;
this.time = Date.now();
console.log("this: %s; 参数: %s; 输出间隔时间: %s", this.msg, arg, delay);
};
const fnBind = fn.bind(obj);
const fnBindThrottle = throttle(fnBind);
fnBind(0);
setTimeout(() => fnBindThrottle(200), 200);
setTimeout(() => fnBindThrottle(500), 500);
setTimeout(() => fnBindThrottle(510), 510);
setTimeout(() => fnBindThrottle(1000), 1000);
/**
* 输出日志：
* this: obj; 参数: 0; 输出间隔时间: 0
* this: obj; 参数: 200; 输出间隔时间: 706
* this: obj; 参数: 1000; 输出间隔时间: 803
*/// 每隔单位时间，只执行一次
function throttle(fn, delay = 500) {
let t = null;
return (...args) => {
if (t) return;
t = setTimeout(() => {
fn(...args);
t = null;
}, delay);
};
}
const obj = { msg: "obj", time: Date.now() };
const fn = function (arg) {
let delay = Date.now() - this.time;
this.time = Date.now();
console.log("this: %s; 参数: %s; 输出间隔时间: %s", this.msg, arg, delay);
};
const fnBind = fn.bind(obj);
const fnBindThrottle = throttle(fnBind);
fnBind(0);
setTimeout(() => fnBindThrottle(200), 200);
setTimeout(() => fnBindThrottle(500), 500);
setTimeout(() => fnBindThrottle(510), 510);
setTimeout(() => fnBindThrottle(1000), 1000);
/**
* 输出日志：
* this: obj; 参数: 0; 输出间隔时间: 0
* this: obj; 参数: 200; 输出间隔时间: 706
* this: obj; 参数: 1000; 输出间隔时间: 803
*/js
// 多次重复触发，只执行最后一次
function debounce(fn, delay = 500) {
let t = null;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), delay);
};
}
const fn = (arg) => console.log(arg, Date.now());
const fnDebounce = debounce(fn);
setTimeout(() => fnDebounce(200), 200);
setTimeout(() => fnDebounce(400), 400);
setTimeout(() => fnDebounce(600), 600);// 多次重复触发，只执行最后一次
function debounce(fn, delay = 500) {
let t = null;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), delay);
};
}
const fn = (arg) => console.log(arg, Date.now());
const fnDebounce = debounce(fn);
setTimeout(() => fnDebounce(200), 200);
setTimeout(() => fnDebounce(400), 400);
setTimeout(() => fnDebounce(600), 600);js
// 立即执行后间歇一段时间可以再立即执行
function immediate(fn, delay = 500) {
let t = null;
return (...args) => {
if (t) return; // 歇
fn(...args); // 立即执行
t = setTimeout(() => {
t = null;
}, delay);
};
}
const fn = (arg) => console.log(arg, Date.now());
const fnImmediate = immediate(fn);
console.log(0, Date.now());
setTimeout(() => fnImmediate(200), 200);
setTimeout(() => fnImmediate(500), 500);
setTimeout(() => fnImmediate(800), 800);// 立即执行后间歇一段时间可以再立即执行
function immediate(fn, delay = 500) {
let t = null;
return (...args) => {
if (t) return; // 歇
fn(...args); // 立即执行
t = setTimeout(() => {
t = null;
}, delay);
};
}
const fn = (arg) => console.log(arg, Date.now());
const fnImmediate = immediate(fn);
console.log(0, Date.now());
setTimeout(() => fnImmediate(200), 200);
setTimeout(() => fnImmediate(500), 500);
setTimeout(() => fnImmediate(800), 800);