Диалог 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

Хе-хе! Моя реакция на эту демонстрацию: Удивительно! Я бы с ним столкнулся, чтобы соответствовать моему коду, теперь я вижу проблему. Благодаря! – 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 не открывается сразу

ответ

Смежные вопросы