1

我有以下代码，它应该打开一个带有进度条的模式对话框。随着 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/

谢谢！

4

2 回答 2

3

您需要删除异步错误。它将锁定您的浏览器，如果对话框尚未显示，则在 ajax 请求之后才会显示。此外， async:false 将导致进度条的更新变得笨拙。

删除“async:false”行，然后您需要通过更新进度条来修复状态问题，在您修复该问题后，这将按照您的意愿工作。

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

在这里更新：http: //jsfiddle.net/xe8wF/2/（修​​复了导致它停止在 99% 的错误）

于 2012-07-17T13:51:06.627 回答
1

这里有一个想法可以让你的进度条工作：（你仍然需要使用它来将它与你的代码集成，但我希望这可以帮助你理解你应该如何处理 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();
      }        
    });
}

希望这能让事情更清楚。

于 2012-07-17T14:22:03.447 回答