Edm*_*son 1 javascript settimeout promise es6-promise
我正在测试Promise对象并编写了一些代码,这些代码模拟了一个同步的长时间运行的任务.我正在比较Promise和setTimeout - 请参阅小提琴:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Promise vs setTimeout</h2>
<div><button id="settimeout-test">setTimeout with slow running function</button></div>
<div><button id="promise-test">Promise and slow running function</button></div>
<div><button id="clear">Clear Results</button></div>
<h5>Results</h5>
<div id="result"></div>
<script>
const slow = function() {
let nu = Date.now();
while (Date.now() - nu < 1000) {}
}
const getSlowPromise = () => new Promise(resolve => {
slow();
resolve();
});
const resultsElement = document.getElementById('result')
const log = (message) => {
resultsElement.innerText += message;
}
const settimeoutButton = document.getElementById('settimeout-test');
settimeoutButton.addEventListener('click', () => {
const now = Date.now();
log(`\nsetTimeout test starts after ${Date.now() - now} ms`);
setTimeout(() => {
slow();
log(`\nSlow function completes after ${Date.now() - now} ms`);
}, 0);
log(`\nEvent listener completes after ${Date.now() - now} ms`);
});
const promiseButton = document.getElementById('promise-test');
promiseButton.addEventListener('click', () => {
const now = Date.now();
log(`\nsetTimeout test starts after ${Date.now() - now} ms`);
getSlowPromise().then(res => log(`\nPromise completes after ${Date.now() - now} ms`));
log(`\nevent listener completes after ${Date.now() - now} ms`);
})
const clear = () => resultsElement.innerText = '';
const clearButton = document.getElementById('clear');
clearButton.addEventListener('click', () => clear());
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我认为Promise和setTimeout会以类似的方式运行,将代码添加到任务队列然后继续执行.结果的顺序是相同的,但是长期运行的任务的承诺似乎会阻止渲染,直到长时间运行的任务完成.有人可以解释一下吗?
该示例在Chrome中运行最佳.
更新: 我不是要让长时间运行的任务并行运行,我只是想理解为什么Promise和setTimeout在我的例子中表现不同.但是,如果您确实希望并行运行任务,那么Web Workers/Worker线程就像Quentin建议的那样.
但是我的问题的答案似乎是,正如Bergi在评论中写道的那样,Promise构造函数是同步的.这是一个更长的解释
while (Date.now() - nu < 1000) {}不会模拟同步的长时间运行任务.这是一个长期运行的任务,是同步的.
Promise是一种管理异步代码的方法,不是一种使代码异步的方法,也不是一种模拟多线程的方法.
为此,你需要看看工人.