0

我正在尝试在操作发生时为用户创建一个简单的进度显示。在执行此操作时，我注意到 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专家，不知道问题出在哪里，希望你们能提供帮助

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循环移动到独立函数中，并使用对话框open事件来调用它。

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

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