Home > Web Front-end > JS Tutorial > How to Turn a `setTimeout` Function into a Promise?

How to Turn a `setTimeout` Function into a Promise?

Patricia Arquette

Release： 2024-11-25 01:42:18

Original

184 people have browsed it

How to Turn setTimeout into a Promise

The task of creating a promise for a function that returns nothing, such as setTimeout, can be initially challenging. To understand this concept, let's refer to a modified code sample:

<br>function async(callback){</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">setTimeout(function(){
    callback();
}, 5000);

Copy after login

}

async(function(){

console.log('async called back');

Copy after login

});

Our goal is to generate a promise that async can return once the setTimeout callback is ready.

Basic Delay with Promise

Using native promises, we can create a function called later as follows:

<br>function later(delay) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return new Promise(function(resolve) {
    setTimeout(resolve, delay);
});

Copy after login

}

This function takes a delay in milliseconds and returns a promise that resolves after the delay expires.

Basic Delay with Value

To modify later and allow it to pass a resolution value, we need to ensure the setTimeout callback receives the value as an argument. For browsers that support providing extra arguments to setTimeout, the following code can be used:

<br>function later(delay, value) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return new Promise(function(resolve) {
    setTimeout(resolve, delay, value);
});

Copy after login

}

This code ensures that the value is passed to the callback and subsequently resolved by the promise.

Cancellable Delay with Value

For cases where we want to provide the ability to cancel the timeout, we can create an object with a cancel method and an accessor for the promise. When the cancel method is called, it clears the timeout and rejects the promise:

<br>const later = (delay, value) => {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let timer = 0;
let reject = null;
const promise = new Promise((resolve, _reject) => {
    reject = _reject;
    timer = setTimeout(resolve, delay, value);
});
return {
    get promise() { return promise; },
    cancel() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
            reject();
            reject = null;
        }
    }
};