0

アクションが発生している間、ユーザーに進行状況を簡単に表示しようとしています。これを行っているときに、すべての JavaScript が終了するまで jquery-ui ダイアログが開かないことに気付きました。

いくつかの疑似コードを作成しましたが、例は問題を示しています: 実際の例: http://jsbin.com/isivus

コード

<!DOCTYPE html>
<html>
<head>
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <meta charset="utf-8">
    <title>HoL</title>
</head>
<script>
    $(function() {
        $('#dialog').dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            closeOnEscape: false
        });

        $(".ui-dialog-titlebar").hide();
        $("#progressbar").progressbar({
            value: 0
        });

        $('input').click(function() {
            $('#dialog').dialog('open');
            for (i = 0; i < 100000; i++) {
                var span = document.getElementById('span');
                $('span').text(i);
            }
        });
    });
</script>
<body>
        <div id="dialog">
            <span class="dialogText">text</span>
            <div id="progressbar"></div>
        </div>
        <input type="button" value="Click me!" />
        <span id="span"></span>
</body>

ループが終了するまで、ダイアログは開きません。ダイアログを表示し、ループの実行中にテキストを更新したいのですが、これは実際には機能していません。

私は JavaScript の専門家ではなく、問題の原因がどこにあるのかわかりません。どなたか助けていただければ幸いです。

4

2 に答える 2

1

あなたのループは、実行中にすべて（おそらくブラウザ全体）をブロックします。

おそらく 10 または 100 ループの小さなチャンクに分割し、非同期で続行します (つまり、ゼロ遅延の setTimeout を使用)。

ジョブを実行する可能性のあるコードを次に示します。

$('input').click(function() {
    $('#dialog').dialog('open');
    var i = 0, elem = $('#span');
    function loop() {
        for(var end = i + 100; i < end; i++) {
            elem.text(i);
        }
        if(i < 100000) {
            window.setTimeout(loop, 0);
        }
    }
    loop();
});

デモ: http://jsfiddle.net/ThiefMaster/fKqQg/3/

于 2012-05-03T10:29:40.470 に答える
-1

forループをスタンドアロン関数内に移動し、dialogsopenイベントを使用して呼び出します。

  $('#dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        open: myBlockingLoopFunction, 
        closeOnEscape: false
    });

 function myBlockingFunction() { 
      // your loop here
 }
于 2012-05-03T10:33:13.553 に答える