首页 > web前端 > js教程 > 如何将 setTimeout 函数变成 Promise?

如何将 setTimeout 函数变成 Promise?

Patricia Arquette
发布: 2024-11-25 01:42:18
原创
141 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板