Question

我有以下代码，它应该打开一个带进度条的模态对话框。当ajax调用在后台进行调整时，进度条应该前进。问题是，在for循环完成之后，对话框才会打开，所有的ajax调用都完成了。我认为我应该以某种方式使用.promose()函数，但我不确定如何在这种情况下实现它。有人能帮我吗？

jQuery('#div_id')
    .button()
    .click(function(){
        var grid = jQuery('#grid_id');
        var sel_ar = grid.jqGrid('getGridParam', 'selarrrow');
        var last_id = 0;

        //open modal progress bar to display the progress of the emails
        jQuery('#dialog').html('<div id="progressbar"></div>');
        jQuery('#dialog').dialog({
            modal: true
        });
        jQuery('#dialog').dialog('open');

        for (var i = 0;i < sel_ar.length;i++){
            var orderid = jQuery('#grid_id').jqGrid('getCell', sel_ar[i], 'order_id');

            if (last_id != orderid){
                jQuery.ajax({
                    async: false,
                    url: "/scripts/ajax/script.php",
                    type: "post",
                    data: "orderid="+orderid,
                    success: function(data){
                        if (data != "true"){
                            alert(data);
                        }
                        jQuery('#progressbar').progressbar({ value: Math.round((i/sel_ar.length)*100) });
                    }
                });
            }
            last_id = orderid;
            pausecomp(1000);
        }
        //jQuery('#dialog').dialog('close');
        jQuery("#keys_list").trigger("reloadGrid");
        jQuery("#purchased_users").trigger("reloadGrid");
    });

pausecomp()是一个暂停一定毫秒数的函数。我试图把它放进去以确保它花费一些时间来完成for循环，所以我可以看到进度条滴答作响...不幸的是它只是延长了我必须等待看到进度条弹出后的时间一切都已完成。

我做了一个说明问题的小提琴。注意它如何等待for循环结束以更新进度条。 http://jsfiddle.net/YxGqG/5/

谢谢！

Answer 1

您需要删除异步false。它会锁定你的浏览器，如果没有显示对话框，它将在ajax请求之后才会显示。此外，async：false将导致进度条的更新变得笨重。

删除行“async：false”然后您需要修复状态问题以及进度条的更新，修复该问题后，这将按照您希望的方式工作。

此外，您在进度条更新中看到的延迟是由于使用async：false。浏览器的UI线程与您的javascript处于竞争状态，当您使用async false执行ajax调用时，一切都会停止，包括“进程内”ui更新以更改进度条的显示。这是一个很高的水平。

UPDATE 在这里你去：http://jsfiddle.net/xe8wF/2/（修复导致它停在99％的错误）

Answer 2

以下是一个可以用来使进度条工作的想法:(您仍然必须使用它来将其与您的代码集成，但我希望这有助于您了解如何处理ajax以更新进度条。

function changeProgress(position) {
    $('#progressbar').progressbar({
            value: position
    });
}

function updatePosition() {
    var position;
    $.post('ajax/get_progress', function(data) {
      // determine position from data - and store it into position
      position = ...;
      changeProgress(position);
      if(position < 100) {
          updatePosition();
      }        
    });
}

希望这会让事情更清楚。

jQuery如何在继续脚本之前确保对话框打开？

2 个答案: