Question

我正在尝试在操作发生时为用户创建简单的进度显示。在这样做时，我注意到jquery-ui对话框在所有javascript完成之前都没有打开。

我创建了一些伪代码，但示例显示了问题：工作示例：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专家，也不知道问题来自哪里，希望你们中的任何人都可以提供帮助

Answer 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/

Answer 2

将for循环移到独立函数中，并使用对话框open事件来调用它。

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

 function myBlockingFunction() { 
      // your loop here
 }

jquery-ui对话框不会立即打开

2 个答案: