setTimeout和Promise

setTimeout和Promise

1. 执行顺序

首先我们来看这样一道题:

setTimeout(function() {
    console.log(1);                            // 第六
}, 0);
new Promise(function(resolve, reject) {
    console.log(2);                            // 第一
    for (var i = 0; i < 10000; i++) {
        if(i === 10) {
            console.log(10);                // 第二
        }
        i == 9999 && resolve();
    }
    console.log(3);                            // 第三
}).then(function() {
    console.log(4);                            // 第五
})
console.log(5);                                // 第四

输出答案为 2 10 3 5 4 1

要先弄清楚 setTimeout(fun,0) 何时执行,promise 何时执行,then 何时执行。

setTimeout 这种异步操作的回调,只有主线程中没有执行任何同步代码的前提下,才会执行异步回调,而setTimeout(fun,0) 表示立刻执行,也就是用来改变任务的执行顺序,要求浏览器尽可能快的进行回调。

promise 何时执行,promise 新建后立即执行,所以 promise 构造函数里代码同步执行的,

then 方法指向的回调将在当前脚本所有同步任务执行完成后执行,那么 then 为什么比 setTimeout 执行的早呢,因为 setTimeout(fun,0) 不是真的立即执行,

经过测试得出结论:执行顺序为:同步执行的代码 —> promise.then —> setTimeout

2. 把setTimeout封装成promise

function timeout(delay){
    let result = new Promise(resolve => setTimeout(resolve, delay));
    return result;
}
timeout(2000).then(() => {
    console.log("123");
    return timeout(2000);
}).then(value => {
    console.log("456");
})
JavaScript 文章被收录于专栏

前端技术分享

全部评论

相关推荐

一个菜鸡罢了:哥们,感觉你的简历还是有点问题的,我提几点建议,看看能不能提供一点帮助 1. ”新余学院“别加粗,课程不清楚是否有必要写,感觉版面不如拿来写一下做过的事情,教育经历是你的弱势就尽量少写 2. “干部及社团经历”和“自我评价”删掉 3. 论文后面的“录用”和“小修”啥的都删掉,默认全录用,问了再说,反正小修毕业前肯定能发出来 4. 工作经验和研究成果没有体现你的个人贡献,着重包装一下个人贡献
点赞 评论 收藏
分享
牛客771574427号:恭喜你,华杰
点赞 评论 收藏
分享
1 1 评论
分享
牛客网
牛客企业服务