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

【问题标题】：Running code inside another thread in javascript在 javascript 的另一个线程中运行代码
【发布时间】：2013-07-12 10:58:53
【问题描述】：

我想在页面上分离线程以防止 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>

【问题讨论】：

这仍然会在同一个线程中执行。一切都将在同一个线程中执行。唯一的例外是 WebWorkers。
但是如果我们说async: true，jquery ajax 请求在不同的线程中工作。我现在正在寻找有关网络工作者的好信息。我需要在其他线程中运行一些东西，同时 gui 仍然可以触摸并从网络加载另一个数据。
该 ajax 请求的回调仍将在同一个线程中执行。 async:true 只是意味着浏览器可以在等待 ajax 调用结果的同时花一些时间处理其他任务。

标签： javascript multithreading settimeout

【解决方案1】：

即使您已通过setTimeout 委托执行，它仍将在同一个线程中执行，它只会在队列中等待其时间，并将推迟任何其他活动直到完成。

请参考“JS Ninja 的秘密”一书中的这张很棒的图片：

【讨论】：

那么 Async/Await 方法呢？它们是用来做什么的？我确信异步作业应该在与执行它的线程不同的线程上运行，例如在桌面/Android 应用程序中，我们可以在后台进行无阻塞 UI 任务，并在异步作业完成时更新 UI。那么这些方法在 Javascript/Typescript 中的用途是什么以及为什么它们被称为 Async ？ basarat.gitbooks.io/typescript/docs/async-await.html

【解决方案2】：

Javascript不是多线程的，你可以看看Web Workers

【讨论】：

【解决方案3】：

javascript(browser) 是一个单线程应用程序，因此即使您在任何时间点使用 setTimeout，也只会有一个线程在运行（执行脚本、重新绘制 UI 等）。阅读更多关于timers work here

因为你有一个每毫秒运行的脚本，它会冻结线程从而阻塞 UI

【讨论】：

【解决方案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”方法连续执行多个任务并获得最终结果。

【讨论】：