Question

我正在努力进一步理解JS。我试图实现一些东西来进行并行函数调用：

console.log(0);
setTimeout(function () { render('header', 10000000); }, 0);
console.log(1);
setTimeout(function () { render('content', 10000); }, 0);
console.log(2);
setTimeout(function () { render('footer', 100); }, 0);
console.log(3);

function render (element, iteration) {
  console.log('render', element);

  // Hard work
  for(var i=0 ; i < iteration; i++) {
    Math.cbrt(i);
  }

  console.log('rendered', element);
}

然而，它始终呈现相同的东西：

0
1
2
3
render header
rendered header
render content
rendered content
render footer
rendered footer

我不明白为什么。我不想使用场所或任何其他图书馆。

这种魔法背后发生了什么？

Answer 1

JS仍然是单线程的。 setTimeout不会启动另一个帖子。使用setTimeout添加3个回调函数，并告诉每个函数从现在开始运行0ms。他们都进入了需要运行的队列。然后它们分别在同一个线程上运行，因此第一个“渲染头”功能仍然阻止下一个回调从被运行的函数队列中删除。

HTML web workers可能是您可以用来做这件事的，但我自己从未使用过它们。

Answer 2

JavaScript使用单个线程来执行您的代码。如果使用setTimeout，则只要准备好处理，就会在事件循环中添加一个条目。由于您没有指定延迟，因此直接创建条目，但只有在创建条目的初始代码完成后才会执行。见MDN 有关它的详细信息页面。

模拟并行行为

2 个答案: