jquery-uiダイアログがすぐに開かない

アクションが発生している間に、ユーザーの進行状況を簡単に表示しようとしています。これをやっている間、jquery-uiのダイアログはすべての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の専門家でないと問題があなたがたのうち、それが実行している間、

出典

2012-05-03 Tjirp

あなたのループは（ほとんどの場合、全体のブラウザが）すべてをブロックします助けることができる期待してから来ているか見当もつかない。

おそらく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-03 10:29:40 ThiefMaster

Heh！そのデモに対する私の反応：恐ろしい！それで私のコードに合うようにうんざりして、私は今問題を見る。ありがとう！ – Tjirp

-1

は、スタンドアロン関数内 forループを移動し、それを呼び出すためのダイアログ openイベントを使用

。

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

function myBlockingFunction() { 
     // your loop here 
}

出典

2012-05-03 10:33:13

それでも、ループ中にブラウザがブロックされます。 – ThiefMaster

jquery-uiダイアログがすぐに開かない

答えて

関連する問題