jquery.post() 处理流程

Question

我有一个页面将 JSON 发布到 cfc，并返回成功/失败消息。构建 JSON 的数组包含已更新的输入字段的 ID。我正在更改元素的背景颜色以提醒用户已进行更新，但是当用户在不离开页面的情况下发布更多更改时就会出现问题。该数组仍然包含上一篇文章中的数据，无论我尝试什么或在哪里清除数组，背景的更改都会停止工作。

这是代码:

$("input").change(function(){
    theArray.push({
       'id':$(this).attr('id'),
       'value':$(this).val()
    });

});

$("#edit_button").click(function(){
    if(theArray.length >0){
        theArray.push({
           //some processing information to the cfc
        });
        theJson = JSON.stringify(theArray);
        $.post("CFCs/fund_profile.cfc",
            {
                method:"updateProfile",
                data:theJson
            },
            function(data){
            if(data.HASERROR == 1){
                $("#messageDiv").empty().html(data.MESSAGE);
            }
            else{
                $("#messageDiv").empty().html(data.MESSAGE);
                theArray.pop();//removing the cfc processing information
                for(var i = 0; i <= theArray.length; i++){
                    var $el = $("#" = theArray[i].id).parent().parent().css('background','red');
                    setTimeout(function(){
                        $el.css('background','');
                        $("#messageDiv").empty();
                    },5000);
                }
            }
         },
         "json");
        //THIS IS WHERE THE PROBLEM LIES (I THINK)
        //I HAVE TRIED THE FOLLOWING:
        var arrayLen = theArray.length;
        for(var j = 0;j <= arrayLen; j++){
            theArray.pop();
        }//DOESN'T WORK

        theArray.length = 0;
        //DOESN'T WORK

        for(var j = 0;j <= arrayLen; j++){
            theArray.shift();
        }//DOESN'T WORK
    }
});

如果我删除代码以清除数组，则会发生背景更改，但数组永远不会丢失该元素，并且将始终显示该元素正在更新。如果我保留它，背景变化根本不会发生。

我确信我错过了一些简单的事情，但我对此感到沮丧。

有什么想法吗？

Answer 1

根据您发布的代码的布局(这并不完全有效，所以我担心它不是您正在使用的实际代码)，您正在处理该帖子- AJAX调用的条件在错误的地方。它位于 $.post() 回调函数的外部，因此它不会以相同的顺序发生(或不保证发生)。请记住，AJAX 是异步，因此包含您的注释以指示哪些内容有效或无效的代码是在回调函数之前发生的。

我建议让 $.post() 中的回调函数尽可能保持自主。让服务器在正在更新的元素的 JSON 响应中返回一个数组，而不是让它与 JavaScript 中的数组交互。然后回调函数就可以愉快地与这些元素进行交互，而在此期间生成的回调函数的其他实例也不会妨碍它。

因此，本质上，您可以在 $.post() 回调之外保留现在拥有的数组的清除，因此它会在进行 AJAX 调用后立即发生(可能在所有情况下都在它返回之前)。您需要修改服务器端代码以返回受影响的 ID。传递给回调函数的 data 参数将包含这些 ID，您可以使用它与 CSS 交互，而不是直接使用 theArray。