0

私はデスクトップ アプリケーションのバックグラウンドを持っていますが、Javascript を学習しているとき、Javascript のスレッド メカニズムを理解するのは非常に困難です。

例えば：

<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        for (var i = 0 ; i < 100000 ; i ++){
            $("#loop1").html(i);

        }
    });

    $("#btn2").click(function(){
        for (var i = 0 ; i < 100000 ; i ++){
            $("#loop2").html(i);

        }
    });
});
</script>
</head>
<body>

Loop 1 : <p id="loop1"></p>
<button id="btn1">Button 1</button>
<br/><br/><br/>

Loop 2 : <p id="loop2"></p>
<button id="btn2">Button 2</button>

</body>
</html>

ボタン 1 をクリックするとブラウザがハングするため、ボタン 2 をクリックしても応答しません。通常、デスクトップ アプリケーションでは、ループをバックグラウンド スレッドに投稿します。しかし、Javascript でそれを行うにはどうすればよいでしょうか。または、Javascript で長い処理を処理するための最良の方法は何ですか?

編集：

以下のコードは機能しませんが、その理由はわかりません。

$("#btn1").click(function(){

        setTimeout( function(){
            for (var i = 0 ; i < 100000 ; i ++){
                $("#loop1").html(i);

            }
        }
        , 0);
    });
4

3 に答える 3

2

以前の回答が既に述べたように、WebWorkersは Javascript のマルチスレッドの唯一のオプションです。残念ながら、DOM の変更を行いたい場合は望みがありません。

ほとんどの人が忘れているのは、 で関数を呼び出すsetTimeoutとsetInterval 、UI がフリーズせず、更新を受け取ることです。

function btnClickHandler() {
    setTimeout(doStuff, 1); // prevent UI freeze
}

function doStuff() {
    // do your stuff here
}

あなたの場合：

var i, interval;

$("#btn1").click(function(){
    i = 0; // reset i

    // create interval
    interval = setInterval(btn1Handler, 1); // run btn1Handler every 1ms
});

function btn1Handler() {
    $("#loop1").html(i);

    if(i++ >= 100000) {
        // cancel the interval
        clearInterval(interval);
    }
}
于 2013-04-05T08:09:36.923 に答える
2

Javascript にはネイティブのマルチスレッドはありません。

HTML5 仕様 ( WebWorkers ) でマルチスレッドを実装しようとする手法もあれば、javascript 自体で実装しようとする手法もありますが、基本仕様 (ECMA) はシングルスレッドです。

Google で検索しただけでもいいのですが..

于 2013-04-05T08:05:59.770 に答える
0

Web ワーカーを使用する場合(および DOM を直接変更できない場合) は別として、ブラウザーにはユーザー JavaScript スレッドが 1 つしかありません。

関数が戻るまで、イベントはスタックされます。DOM を並行して変更する 2 つの実行時間の長い操作を行うことができます。

于 2013-04-05T08:06:28.960 に答える