如何将 setTimeout 函数变成 Promise？-js教程-PHP中文网

如何将 setTimeout 函数变成 Promise？

Patricia Arquette

发布： 2024-11-25 01:42:18

原创

184 人浏览过

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

如何将 setTimeout 变成 Promise

为不返回任何内容的函数创建 Promise 的任务，例如 setTimeout，最初可能具有挑战性。为了理解这个概念，让我们参考修改后的代码示例：

<br>function async(callback){<pre class="brush:php;toolbar:false">setTimeout(function(){
    callback();
}, 5000);

登录后复制

}

async(function(){

console.log('async called back');

登录后复制

});

我们的目标是生成一个承诺，一旦 setTimeout 回调完成，异步就可以返回

Promise 的基本延迟

使用原生 Promise，我们可以创建一个稍后调用的函数，如下所示：

 <br>稍后运行（延迟） {<pre class="brush:php;toolbar:false">return new Promise(function(resolve) {
    setTimeout(resolve, delay);
});

登录后复制

}

此函数会延迟（以毫秒为单位），并返回一个在延迟到期后解析的 Promise。

< ;h3>带有值的基本延迟

至稍后修改并允许它传递分辨率值，我们需要确保 setTimeout 回调接收该值作为参数。对于支持向 setTimeout 提供额外参数的浏览器，可以使用以下代码：

<br>function later(delay, value) {<pre class="brush:php;toolbar:false">return new Promise(function(resolve) {
    setTimeout(resolve, delay, value);
});

登录后复制

}

此代码确保该值传递给回调并随后由

带有值的可取消延迟

对于我们想要提供取消超时功能的情况，我们可以创建一个带有 cancel 方法的对象，并Promise 的访问器。当调用cancel方法时，它会清除超时并拒绝promise：

<br>const later = (delay, value) =>; {<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;
        }
    }
};

登录后复制

};

此方法提供了一种取消待处理超时并拒绝相关承诺的方法。

以上是如何将 setTimeout 函数变成 Promise？的详细内容。更多信息请关注PHP中文网其他相关文章！