💾debounce(f, s)

suspends function calls until there's a specified period of inactivity, then invokes it.

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

(decorator) suspends calls to f until there’s s seconds of inactivity (no further calls), then invokes the last function call (previous calls are ignored).

💾 程式

• replit：debounce(f, s)

• compare： debounce vs. throttle

// 📁 debounce.js
// ⭐️ decorator: "debounce"
//   (suspends 'f' for 's' seconds)
function debounce(f, s) {

    // log
    console.log(`'${f.name}' has been debounced by ${s} seconds.`)

    // ⭐️ timer id
    let timer;

    // wrapper
    return function wrapper(...args) {
        
        // ⭐️ clear old timer (if it exits)        
        clearTimeout(timer);
        
        // ⭐️ set new timer (in s seconds)
        timer = setTimeout(
            () => f.apply(this, args),
            s * 1000
        );
    }
}

// export
module.exports = { debounce };

💈範例

• replit：debounce(f, s)

// 📁 index.js
const { debounce } = require('./debounce.js');

// function
function f(...args) {
    let t = Date.now();               // current time
    let T = (t - t0)/1000;            // seconds elapsed from t0
    console.log(T.toFixed(2), args);
}

// ⭐️ debounce `f` (for 2 seconds)
f = debounce(f, 2);

// ⭐️ initial time
let t0 = Date.now();

// ⭐️ call the "debounced" `f`
setTimeout(() => f("a"), 0); 
setTimeout(() => f("b"), 1.5 * 1000); 
setTimeout(() => f("c"), 4.0 * 1000); 

//                 ❌                  ✅                       ✅
//                 a                   b                        c
//  |----- 1.5 --->|─────── 2.0 ──────>|    |─────── 2.0 ──────>|
// (a)            (b)                      (c)
//  |....╷....|....╷....|....╷....|....╷....|....╷....|....╷....|
//  0         1         2         3         4         5         6

// log
// ------------------------------------
// 'f' has been debounced by 2 seconds.
//
// 3.50 [ 'b' ]
// 6.00 [ 'c' ]

📘 手冊

• 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

👥 相關

• decorator