Jquery~$when_done_then的用法 - lori－IT工程師數位筆記本

文章出處

對于$.ajax請求來說，如果層級比較多，程序看起來會比較亂，而為了解決這種問題，才有了$when...done...fail...then的封裝，它將$.ajax這嵌套結構轉成了順序平行的結果，向下面的$.ajax寫法，看起來很亂

    $.ajax({
        url: "/home/GetProduct",
        dataType: "JSON",
        type: "GET",
        success: function (data) {
            $.ajax({
                url: "/home/GetProduct",
                dataType: "JSON",
                type: "GET",
                success: function (data) {
                    $.ajax({
                        url: "/home/GetProduct",
                        dataType: "JSON",
                        type: "GET",
                        success: function (data) {
        
                        }
                }
        }

而它實現的功能無非就是外層執行完成后，去執行內層的代碼代碼，看下面的$.when寫法，就清晰多了

    $.when($.ajax({
        url: "/home/GetProduct",
        dataType: "JSON",
        type: "GET",
        success: function (data) {
            alert(JSON.stringify(data));
        }
    })).done(function (data) {
        alert(data[0].Name);
    }).done(function (data) {
        alert(data[1].Name);
    }).fail(function () {
        alert("程序出現錯誤！");
    }).then(function (data) {
        alert("程序執行完成");
    });

而對于這種ajax的封裝，在比較流行的node.js里也需要被看到，這就類似于方法的回調技術！

在使用ＭＶＶＭ的KO上，更加得心應手，感覺$.when就是為了Knockoutjs而產生的！

    //ＭＶＶＭ數據綁定
    var MyModel = new model();
    $.when($.ajax({
        url: "/home/GetProduct",
        dataType: "JSON",
        type: "GET",
        success: function (data) {
            MyModel.PeopleList = ko.observableArray(data);//先為對象賦值
        }
    })).done(function (data) {
        ko.applyBindings(MyModel);//再綁定對象
    });