Вы правы в том, что это долгосрочное задание, я просто хотел имитировать более значимое задание. Я думаю, что код является асинхронным, поскольку он фактически выполняет последний вызов функции журнала, прежде чем он запускает код внутри Promise или setTimeout в обоих случаях. Но он, конечно, не работает параллельно, поскольку JavaScript является однопоточным. Но я не пытаюсь работать параллельно, я просто пытаюсь понять, почему Promise и setTimeout ведут себя по-разному.
тировал объект 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>
Я думал, что Promise и setTimeout будут вести себя аналогичным образом, добавят код в очередь задач и затем продолжат выполнение. Порядок результатов тот же, но обещание с долго выполняющейся задачей, кажется, блокирует рендеринг, пока долго выполняющаяся задача не завершится. Может кто-нибудь объяснить это?
Пример работает лучше всего в Chrome.
Обновить: Я не пытаюсь заставить параллельную задачу выполняться параллельно, я просто хочу понять, почему Promise и setTimeout ведут себя по-разному в моем примере. Но если вы хотите запустить задачу параллельно, то потоки Web Workers / Worker - это то, что вам нужно, как предлагает Квентин.
Но ответ на мой вопрос, похоже, заключается в том, что конструкторы Promise синхронны, как пишет Берги в комментарии. Вот дольшеобъяснение