1

3 つの入力を連続して更新します。これらはボタンを 1 回クリックするだけで順次更新され、更新の完了後に各入力にクールな色の変化 (光る) 効果を適用します。

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;
}

皆さんはどう思いますか？

ありがとう！

4

2 に答える 2

2

あなたは ajax リクエストを実行していますが、各リクエストにはさまざまな時間がかかる可能性があります... ajax は非同期であるため、それらはすべて同時に実行され、どちらが最初の出力を最初に返すかなど..

于 2013-07-11T19:42:23.810 に答える
2

ここQueueで私の答えで likeを使用してみてください。次に、次のようなことができます。

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 呼び出しが終了した後に新しい ajax 呼び出しを実行する必要があります。

于 2013-07-11T19:43:16.233 に答える