💾throttle(f, s)

throttle function calls by every s seconds.

JS ⟩ technique ⟩ decorator ⟩ 💾 throttle(f, s)

(decorator) throttle function calls by every s seconds.

🗺️ 圖解

throttle: timeline/state view

throttle: timer view

💾 程式

• replit：throttle(f, s)

• 🗺️ 圖解

// 📁 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 }

💈範例

• replit：throttle(f, s)

// 📁 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'

👥 相關

• decorator

• compare： debounce vs. throttle

📘 手冊

• clearTimeout()

• setTimeout()

• Date.now() - number of milliseconds elapsed since 1970/1/1 (00:00:00 UTC).

📗 參考

• JS.info ⟩ Decorators and forwarding, call/apply ⭐️

• YDKJS: Scope & Closures (v.2) ⟩ Ch. 6 (by IIFE, ie. closure)

• [演算法] Fibonacci：善用 cache 和 Memoization 提升程式效能 (by parameter)

• Wictionary ⟩ memoize