17

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>
4

4 に答える 4

12

実行を委任しsetTimeoutた場合でも、同じ単一のスレッドで実行されますが、キュー内の時間だけ待機し、完了するまで他のアクティビティを延期します。

「Secrets of JS Ninja」本からこの素晴らしい写真を参照してください。

ここに画像の説明を入力

于 2013-07-12T11:04:26.060 に答える
7

Javascript はマルチスレッド化されていません。Web Workersを参照してください。

于 2013-07-12T11:02:16.690 に答える
6

javascript(browser) はシングル スレッド アプリケーションであるため、いつでも setTimeout を使用しても、実行中のスレッドは 1 つだけです (スクリプトの実行、UI の再描画など)。タイマーの仕組みについて詳しくは、こちらをご覧ください

ミリ秒ごとにスクリプトを実行しているため、スレッドがフリーズし、UI がブロックされます。

于 2013-07-12T11:01:51.823 に答える
0

「Promise」を使用して非同期関数を操作できます。

約束文書

Promise は、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);

「resolve」メソッドの代わりにPromiseと「all」メソッドを使用して、複数のタスクを連続して実行し、最終結果を取得することもできます。

于 2021-01-03T07:48:41.360 に答える