为什么承诺对象块渲染？
我正在测试承诺对象，并编写了一些代码，以模拟同步的长期运行任务。我正在比较Promise和SettieMout-请参阅 fiddle ：
<!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>
我以为Promise and Settiemout会以一种类似的方式行事，将代码添加到任务队列，然后继续执行。结果的顺序是相同的，但是长期运行任务的承诺似乎阻止了渲染，直到长期运行的任务完成为止。有人可以解释一下吗？
该示例在Chrome中运行最佳。
更新： 我并不是要使长期运行的任务并行运行，我只是想了解为什么在我的示例中承诺和Settimeout行为会有所不同。但是，如果您确实想并行运行任务，那么Web Worker / Worker线程就是Quentin所建议的方法。
但是我问题的答案似乎是，正如伯吉在评论中所写的那样，诺言构造者是同步的。 这是一个更长的说明
I was testing the Promise object and wrote some code that simulates a long running task that is synchronous. I was comparing Promise and setTimeout - see fiddle:
<!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>
I thought Promise and setTimeout would behave in a similar way, add the code to the task queue and then continue the execution. The order of the results are the same but the promise with a long running task seems to block the rendering until the long running task completes. Can someone explain this?
The example runs best in Chrome.
Update:
I'm not trying to make the long running task to run in parallel, I just want to understand why Promise and setTimeout behave differently in my example. But if you do want to run the task in parallel then Web Workers / Worker threads is the way to go as Quentin suggests.
But the answer to my question seems to be that Promise constructors are synchronous as Bergi writes in a comment.
Here is a longer explanation
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
while（date.now（） - nu＆lt; 1000）{}一个长期运行的任务。它是是一项长期运行的任务。承诺是管理异步代码的一种方法，而不是使代码异步的一种方法，也不是一种模拟多线程的方法。
为此，您需要查看工人。
while (Date.now() - nu < 1000) {}doesn't simulate a long running task that is syncronous. It is a long running task that is syncronous.Promises are a way to manage asynchronous code, not a way to make code asynchronous, nor a way to simulate multithreading.
For that, you need to look at workers.