为什么我的 foreach 很困惑？答案

【问题标题】：Why is my foreach confused?为什么我的 foreach 很困惑？
【发布时间】：2013-07-11 19:39:20
【问题描述】：

我连续更新三个输入，通过单击按钮顺序更新它们，并且在更新完成后我对每个输入做一个很酷的颜色变化（发光）效果：

你应该看到这样的东西，其中 t= 时间（我觉得自己像个科学家）

    [30.20]  [20.32]  [34.33]  [Update] <--- Clicked this
t=1 Glow
t=2          Glows     
t=3                   Glows

但有时颜色效果会出现问题，例如：

    [30.20]  [20.32]  [34.33]  [Update] <--- Clicked this
t=1 Glow
t=2                   Glows
t=3          Glows

这是我的脚本：

仅供参考：我测试并发现乱序问题始于.each

在页面上它们一个接一个。

function UpdatePrice(TheButton, Type) {
    $(TheButton).parent().parent().find("input").each(function (index, element) {

        $.ajax({
            cache: false,
            data: { ByContractID: $(element).parent().attr("id"), Cost: $(element).val(), ItemType: Type },
            type: "Post",
            url: '@Url.Action("UpdateCost")'
        }).success(function () {

            $(element).next().html(($(TheButton).parent().parent().children("td").eq(0).html() * $(element).val()).toFixed(2));
            $(element).val(parseFloat($(element).val()).toFixed(2));
            var old = $(element).css('background-color');
            $(element).animate({ "background-color": "#D2F0C9" }, "fast", function () { $(element).animate({ "background-color": old }, "fast") });


        });


    });

    return false;
}

你们觉得呢？

谢谢！

【问题讨论】：

也许你可以链接到一个 jsfiddle？
Ajax 响应是异步的。触发成功的顺序可以不同。

标签： jquery

【解决方案1】：

尝试在我的回答here 中使用Queue，然后您可以执行以下操作：

function UpdatePrice(TheButton, Type) {
    var q = new Queue;
    $(TheButton).parent().parent().find("input").each(function (index, element) {
        //add to the Queue
        q.add(function(){
            $.ajax({
                cache: false,
                data: { ByContractID: $(element).parent().attr("id"), Cost: $(element).val(), ItemType: Type },
                type: "Post",
                url: '@Url.Action("UpdateCost")'
            }).success(function () {

                $(element).next().html(($(TheButton).parent().parent().children("td").eq(0).html() *     $(element).val()).toFixed(2));
                $(element).val(parseFloat($(element).val()).toFixed(2));
                var old = $(element).css('background-color');
                $(element).animate({ "background-color": "#D2F0C9" }, "fast", function () {     $(element).animate({ "background-color": old }, "fast") });

                q.next(); //run next function

            });

            return false; 
            // ^^ insures that the queue does not continue when the function is finished.
        });

    });

    return false;
}

之所以必须这样做，是因为 Ajax 是异步的，所以为了按顺序运行它们，你必须在上一个调用完成后运行新的 ajax 调用。 p>

【讨论】：

Uncaught ReferenceError: Queue is not defined
@Pinch 你是否从我的previous answer 中添加了Queue 类？
@Pinch 没问题 ^_^ 很高兴我能帮上忙。 Queue 对象可以以许多不同的方式使用。我相信您会找到扩展它的方法：-D

【解决方案2】：

您正在执行 ajax 请求，每个请求可能需要不同的时间...由于 ajax 是异步的，它们都同时执行，哪个首先返回第一个输出，等等。

【讨论】：