Jquery DOM 在 .each() 迭代后不更新

Question

我试图在每次迭代时跟踪更新，当每次完成时，我想以一种优雅的方式向用户显示摘要。我已经尝试了几乎所有方法调用来更新页面上的元素，但除非我在事件调用中的任何时候发出警报，否则它不会更新。

如果有人知道我可能缺少什么，我想看看它是如何完成的。非常感谢！

$('#button-restore-projects').live("click", function() {
                    var countSuccess = 0
                    , countError = 0
                    , element = $("#selectedProjects option")
                    , eachCount = element.length;
                    $("#countReady").html(eachCount);

                    $.each(element, function(i, o) {
                        var id = $(this).val();
                        //alert(i);
                        $.ajax({
                            type: "POST",
                            url: RestoreProject,
                            data: "plan=<%= Model.RtpSummary.RtpYear %>"
                                + "&id=" + id,
                            dataType: "json",
                            success: function(response, textStatus, XMLHttpRequest) {
                                if (response.error == "false") {
                                    //$('').html(response.message);
                                    //$('').addClass('success');
                                    //autoHide(2500);
                                    oProjectListGrid.fnAddData([
                                        "<a href=\"/RtpProject/" + response.data.RtpYear + "/Info/" + response.data.ProjectVersionId + "\">" + response.data.Title + "</a>",
                                        response.data.PlanType,
                                        response.data.COGID,
                                        response.data.TIPId,
                                        response.data.ImprovementType,
                                        response.data.SponsorAgency,
                                        response.data.AmendmentStatus,
                                        response.data.ProjectVersionId]);
                                    countSuccess++;
                                    removeProject(id, false, null);
                                } else {
                                    countError++;
                                    //$('.dialog-result').html(response.message + " Details: " + response.exceptionMessage);
                                    //$('.dialog-result').addClass('error');
                                    //autoHide(10000);
                                }
                                window.onbeforeunload = null;
                            },
                            error: function(response, textStatus, AjaxException) {
                                //alert("error");
                                countError++;
                                //$('').html(response.statusText);
                                //$('').addClass('error');
                                //autoHide(10000);
                            }
                        });
                        //alert(eachCount);
                        //eachCount--;
                        $("#countReady").text(eachCount + ", " + countError + ", " + countSuccess);
                        //alert(eachCount + ", " + countError + ", " + countSuccess);

                        if (eachCount-1 == i) { showRestoreResponse(countError, countSuccess); }
                    });
                    //alert("test");


                    return false;
                });

解决方案!!!

首先非常感谢所有人，特别是@SLaks！其次，http://james.padolsey.com/javascript/monitoring-dom-properties / 被认为是一个监视对象的小插件。

我所做的是将原始变量转换为本质上被监视的对象。使用上面的 jquery 插件，我观察了对象的条件：newVal == 0，其中 newVal 是eachCount 的新值。该手表每毫秒都会等待所有服务器响应以错误或成功的方式返回给我。完成后，我会显示一个关于所发生操作的漂亮的小摘要报告。

我不太确定这是否是最好的方法，但它在屏幕上看起来不错，而且我的眼睛看着它也不会太痛。以下是我的解决方案。稍后我将添加有关保持队列中剩余内容的活动记录更新的建议。所有这些代码主要是我添加的调试。

$('#button-restore-projects').live("click", function() {

                var element = $("#selectedProjects option");

                var obj = { eachCount: element.length, countSuccess: 0, countError: 0 };
                //$("#countReady").html(eachCount);

                $.each(element, function(i, o) {
                    var id = $(this).val();
                    //alert(i);
                    $.ajax({
                        type: "POST",
                        url: RestoreProject,
                        data: "plan=<%= Model.RtpSummary.RtpYear %>"
                            + "&id=" + id,
                        dataType: "json",
                        success: function(response, textStatus, XMLHttpRequest) {
                            if (response.error == "false") {
                                //$('').html(response.message);
                                //$('').addClass('success');
                                //autoHide(2500);
                                oProjectListGrid.fnAddData([
                                    "<a href=\"/RtpProject/" + response.data.RtpYear + "/Info/" + response.data.ProjectVersionId + "\">" + response.data.Title + "</a>",
                                    response.data.PlanType,
                                    response.data.COGID,
                                    response.data.TIPId,
                                    response.data.ImprovementType,
                                    response.data.SponsorAgency,
                                    response.data.AmendmentStatus,
                                    response.data.ProjectVersionId]);
                                obj.eachCount--;
                                obj.countSuccess++;
                                removeProject(id, false, null);
                            } else {
                                obj.countError++;
                                //$('.dialog-result').html(response.message + " Details: " + response.exceptionMessage);
                                //$('.dialog-result').addClass('error');
                                //autoHide(10000);
                            }
                            window.onbeforeunload = null;
                        },
                        error: function(response, textStatus, AjaxException) {
                            //alert("error");
                            obj.countError++;
                            //$('').html(response.statusText);
                            //$('').addClass('error');
                            //autoHide(10000);
                        }
                    });
                    //$("#countReady").text(eachCount + ", " + countError + ", " + countSuccess);
                });

                $(obj).watch('eachCount', function(propName, oldVal, newVal) {
                    //alert(newVal);
                    if (newVal == 0) {
                        showRestoreResponse(obj.countError, obj.countSuccess);
                    }
                });

                return false;
            });

Answer 1

问题看起来可能

$("#countReady").text(eachCount + ", " + countError + ", " + countSuccess);

在于ajax函数内部调用成功和错误时需要调用This。

---

而且这确实不是最好的方法。实际上，您应该使用带有 keep-alive 的 ajax 连接，并在一个 POST 中发送数据，然后定期让 PHP 脚本以 JSON 格式发回最新状态： { "countSuccess": "5 ", "countError", "0", "current": "5", "total": "10" } 然后当 current == Total 时你知道它已经完成，显示一个详细说明结果的信息 div。 :)

Answer 2

$.ajax 是一个立即返回的异步调用。
在服务器回复后，稍后会调用 success 回调。

因此，在 each 循环之后，尚未运行任何 success 回调。