> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/func/kind/higher/decorator/delay-f-s.md).

# delay(f, s)

delay the execution of a function/method by s seconds.

[JS](/web/js.md) ⟩ [technique](/web/js/tech.md) ⟩ [decorator](/web/js/val/func/kind/higher/decorator.md) ⟩ :floppy\_disk: delay(f, s)

{% hint style="success" %}
([decorator](/web/js/val/func/kind/higher/decorator.md)) <mark style="color:orange;">**delay**</mark> the <mark style="color:yellow;">**execution**</mark> of a [function](/web/js/val/func.md)/[method](/web/js/val/obj/method.md) <mark style="color:yellow;">**by s seconds**</mark>.
{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}

* replit：[delay(f, s)](https://replit.com/@pegasusroe/decorator-delayf-ms#delay.js)

```javascript
// 📁 delay.js
const { log } = console;

// ⭐️ decorator: "delay"
//    (delay execution by s seconds)
function delay(f, s) {

    // wrapper
    return function wrapper(...args) {

        // delay execution
        setTimeout(

            // ❗ msut use "arrow function" here. 
            // ❗ `this` context is taken from the `wrapper`.
            () => {
                
                // add single-quotes ('') to string arguments
                let arglist = args
                    .map(arg => typeof arg === 'string' ? `'${arg}'` : arg)
                    .join(' ,');
                
                // log execution time, function name, arguments
                log(`${s}: ${f.name}(${arglist}) ...`);

                // ⭐️ forward function call to `f`
                f.apply(this, args);    // ❗ `this` context taken from `wrapper`
            },

            // execute after s seconds
            s * 1000
        );
    }
}

// export
module.exports = { delay };
```

{% endtab %}

{% tab title="💈範例" %}

* replit：[delay(f, s)](https://replit.com/@pegasusroe/decorator-delayf-ms#delay.js)

```javascript
// 📁 index.js
const { delay } = require('./delay.js');

// function
function f(x) {
  console.log(`   • ${x}`);
}

// object method
const joe = {
    name: 'Joe',
    say(anything) { console.log(`   • ${this.name}: "${anything}"`) },
}

// ❗ delaying method
delay(joe.say, 3)('long time no see!');  // ❗ `this` === undefined (in module context)

// ⭐️ "delay" and "reassign" method
joe.say = delay(joe.say, 4);             // ❗ `this` is still unbound
joe.say('nice to meet you!');            // ⭐️ `this` === `joe` (at call site)

// ⭐️ delaying f function
delay(f, 1)('hello');
delay(f, 2)('world');

// log
// ------------------------------------
// 1: f('hello') ...
//    • hello
// 2: f('world') ...
//    • world
// 3: say('long time no see!') ...
//    • undefined: "long time no see!"   <----  `this` === undefined❗
// 4: say('nice to meet you!') ...
//    • Joe: "nice to meet you!"
```

{% endtab %}

{% tab title="📗 參考" %}

* [x] JS.info ⟩ [Decorators and forwarding, call/apply](https://javascript.info/call-apply-decorators) ⭐️
* [ ] [YDKJS: Scope & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) ⟩ Ch. 6  (by IIFE, ie. closure)
* [ ] [\[演算法\] Fibonacci：善用 cache 和 Memoization 提升程式效能](https://pjchender.blogspot.com/2017/09/fibonacci-cache-memoization.html) (by parameter)
* [ ] Wictionary ⟩  [memoize](https://en.wiktionary.org/wiki/memoize)&#x20;
  {% endtab %}

{% tab title="👥 相關" %}

* [decorator](/web/js/val/func/kind/higher/decorator.md)
  {% endtab %}
  {% endtabs %}