Question

我想在页面上分开线程以防止gui冻结。为此，我运行的函数将使用setTimeout将gui冻结在另一个线程中但仍然冻结。

代码和jsbin链接如下：

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
  type="text/javascript"></script>
  <meta charset="utf-8" />
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <input type="button" value="düðme" id="btn" />

  <script type="text/javascript">
      $("#btn").on("click",function(){
        $("#div1").html(new Date());
      });

      $(document).ready(function(){
        setTimeout(function() { count(); },1);
      });

      function count(){
        for(var i =0;i<100000;i++){
          $("#div2").html(i);
        }
          $("#div2").append(new Date());
      }
  </script>

</body>
</html>

Answer 1

即使你已经通过setTimeout委派了执行，它仍然会在同一个线程中执行，它只会等待队列中的时间，并推迟任何其他活动，直到完成为止。

请参阅“JS忍者的秘密”一书中的精彩图片：

enter image description here

Answer 2

javascript（浏览器）是一个单线程应用程序，因此即使您在任何时间点使用setTimeout，也只会运行一个线程（执行脚本执行，重新绘制ui等）。详细了解timers work here

的详情

由于你的脚本每毫秒运行一次，它会冻结线程，从而阻塞UI

Answer 3

Javascript不是多线程的，您可能需要查看Web Workers

Answer 4

您可以使用“Promise”来操作异步函数：

Promise document

<块引用>

Promise 是在创建 Promise 时不一定知道的值的代理。它允许您将处理程序与异步操作的最终成功值或失败原因相关联。这让异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个承诺，在未来的某个时刻提供该值。

第 1 步：

const dosomethingPromise = (data, otherInput) => {
return new Promise((resolve, reject) => {
     /* do your work here*/
    resolve(true) /* return result here or you can use reject for execute catch block*/
})

};

第 2 步： 在您的代码中像这样使用它：

 Promise.resolve(dosomethingPromise(data,otherInput))
        .then((result) => {
            /*your result come here*/
            console.log("Progress finished=>", result);
        }, (error) => {
            console.log(error)
        })
        .catch(console.log);

您还可以使用 Promise 和“all”方法代替“resolve”方法来连续执行多个任务并获得最终结果。

在javascript中的另一个线程内运行代码

4 个答案: