JavaScript 解決非同步順序執行問題

標籤：

開始用 for 迴圈非同步呼叫資料的時候，發現非同步執行時在 for 迴圈後面執行。當然擷取的結果也不是我想要的。

一般這種情況：我們可以通過下面方法解決

1、JQuery $ajax

設定ajax參數async為false，即與js同步，預設是true(非同步).

for(int i = 0 ; i < 5 ; i++){

var html= $.ajax({url: url,async: false}).responseText;

}

2、可以利用遞迴的方法實現，當非同步執行完成後在調用自身的函數

 $scope.goodsList = [];

            function getProducts(nameIndex){

//                for(var i=0;i<name.length;i++){        //原來 for 迴圈寫法擷取的資料排序不固定

                    var product = new AV.Query(‘Product‘);

                    //商品類型

                    var Cid = new AV.Query(‘Classify‘);

                    Cid.equalTo("gjz", name[nameIndex]);

                    Cid.find().then(function(res){

                        product.equalTo("cid",  parseInt(res[0].id));

                        product.equalTo("status", 1);

                        product.descending("updatedAt");

                        product.limit(4);

                        var results = [];

                        //查詢商品

                        product.find().then(function(res2) {

                            angular.forEach(res2, function (result, index) {

                                var oo = result.toJSON();

                                oo.picurlarray = angular.fromJson(oo.picurlarray);

                                oo.activeName = res[0].toJSON().title;

                                oo.activeNameEN = res[0].toJSON().gjz;

                                for(var key in oo.spec){

                                    $scope.$apply(function() {

                                        oo.product = oo.spec[key];

                                        results.push(oo);

                                    });

                                    break;

                                }

                            });

                            $scope.goodsList.push(results);

                            console.log($scope.goodsList);

                            /*

                            *利用遞迴實現非同步資料執行後再調用自身函數

                            */

                            nameIndex++;

                            if(nameIndex<name.length)

                                getProducts(nameIndex);

                            else

                                return;

                        });

                    });

//                }

            }

            //果然推薦、果然熱賣、積分商品、果然好禮、果然特價

            var name = ["grtj","grrm","jfsp","grhl","grtjia"];

            var nameIndex = 0;

            getProducts(nameIndex);

JavaScript 解決非同步順序執行問題