throttle function calls by every s seconds.
JS ⟩ technique ⟩ decorator ⟩ 💾 throttle(f, s)
(decorator) throttle function calls by every s seconds.
replit：throttle(f, s)
replit：throttle(f, s)
compare： debounce vs. throttle
Last updated
Was this helpful?
Was this helpful?
// 📁 throttle.js
const { log } = console;
// ⭐️ decorator: "throttle"
// (throttle function calls by every s seconds)
function throttle(f, s) {
// log
log(`'${f.name}' has been throttled by every ${s} seconds.`);
// ⭐️ throttler's states
let inCooldownMode = false; // ⭐️ in "cooldown" mode
let savedCall; // ⭐️ saved call
// ⭐️ throttler ("wrapper")
return function wrapper(...args) {
// 🔸 case 1: in "cooldown" mode
// ---------------------------------------
// ④ save call (without executing/forwarding it)
if (inCooldownMode) {
savedCall = { arguments: args, context: this }; // ④
return;
}
// 🔸 case 2: in "idle"/"cool" mode
// ---------------------------------------
// ① switch to "cooldown" mode
// ② forword call to `f`
// ③ set timer (switch back to "idle" mode in `s` seconds)
inCooldownMode = true; // ①
f.apply(this, args); // ②
// ③
setTimeout(() => {
// time's up!
// ------------------------------------
// ⑤ switch back to "idle" mode
// ⑥ check saved call:
//
// • case 1: there's a saved call
// ----------------------------
// ⑦ send saved call
// ⑧ clear saved call
//
// • case 2: no saved call
// ----------------------
// (do nothing)
//
// ------------------------------------
inCooldownMode = false; // ⑤ switch back to "idle" mode
if (savedCall) { // ⑥ check saved call
// case 1: there's a saved call
// ⑦ send saved call
// (⭐️ "saved call" sent to "wrapper", not `f`❗)
wrapper.apply(savedCall.context, savedCall.arguments);
savedCall = null; // ⑧ clear saved call
} // case 2: no saved call (do nothing)
}, s * 1000); // timer turned off in `s` seconds
}
}
// export
module.exports = { throttle }// 📁 index.js
const { log } = console;
const { throttle } = require('./throttle.js');
// object
let user = {
// property
name: 'Joe',
// method
say(...args) {
const t = Date.now(); // current time
const T = (t - t0)/1000; // time elapsed in seconds
log(T.toFixed(2), `${this.name}: '${args}'`);
}
};
// passes calls to `user.say` at maximum once per 1000 ms
user.say = throttle(user.say, 1);
// send message
function send(msg, sec) {
setTimeout(() => user.say(msg), sec * 1000)
}
const t0 = Date.now();
send('a', 0.5);
send('b', 1.2);
send('c', 2);
send('d', 2.5);
send('e', 4);
send('d', 4.5);
// ✅ ✅ ❌ ✅ ✅ ✅
// a b d e f <---- forwarded calls
// |<──CDM──>| |<──CDM──>|
// |<──CDM──>| |<──CDM──>| |<──CDM──>|
// (a) [b] [c] [d] (e) [f]
// |....╷....|....╷....|....╷....|....╷....|....╷....|....╷....|
// 0 1 2 3 4 5 6 sec
//
// CDM: "cooldown" mode
// (a): send call (a)
// [b]: save call (b)
// d : forworded call
// log
// --------------------
// 'say' has been throttled by every 1 seconds.
//
// 0.50 Joe: 'a'
// 1.50 Joe: 'b'
// 2.50 Joe: 'd'
// 4.00 Joe: 'e'
// 5.00 Joe: 'd'