1. 程式人生 > >深刻理解ajax中同步和非同步的區別和使用場景

深刻理解ajax中同步和非同步的區別和使用場景

先上兩段程式碼,猜下這兩段程式碼的console.log的執行順序和結果:

程式碼一:

                    $.ajax({
                        type: "post",
                        async:true, //不設定此引數的話預設為true
                        url: "/teacher/ajaxtimeline",
                        data: {"month": month, "uid":<?php echo intval($teacher->uid);?>},
                        dataType: "json",
                        success: function(data) {
                            //假設data.canNotSetDays服務端返回的是[9,10,11]
                            $.each(data.canNotSetDays, function(i, item) {
                                canNotSetDays.push(item);
                            });

                            console.log('**********ajax result ************');
                            //此處是可以獲取canNotSetDays的值的,並能查詢到其中的元素數字9
                            console.log(canNotSetDays);
                            console.log(canNotSetDays.length);
                            console.log(canNotSetDays.indexOf(9));

                        }
                    });

                    console.log('***********after ajax ***********');

                    //此處是獲取不到canNotSetDays的值的,長度為0,無法查詢到其中的元素數字9
                    console.log(canNotSetDays);
                    console.log(canNotSetDays.length);
                    console.log(canNotSetDays.indexOf(9));

                    console.log('**********delay two seconds************');

                    setTimeout(function(){
                        //延遲2秒後也是可以獲取canNotSetDays的值的,並能查詢到其中的元素數字9
                        console.log(canNotSetDays);
                        console.log(canNotSetDays.length);
                        console.log(canNotSetDays.indexOf(9));
                    }, 2000);
            

程式碼二:

                     $.ajax({
                        type: "post",
                        async:false, //不設定此引數的話預設為true
                        url: "/teacher/ajaxtimeline",
                        data: {"month": month, "uid":<?php echo intval($teacher->uid);?>},
                        dataType: "json",
                        success: function(data) {
                            //假設data.canNotSetDays服務端返回的是[9,10,11]
                            $.each(data.canNotSetDays, function(i, item) {
                                canNotSetDays.push(item);
                            });

                            console.log('**********ajax result ************');
                            //此處是可以獲取canNotSetDays的值的,並能查詢到其中的元素數字9
                            console.log(canNotSetDays);
                            console.log(canNotSetDays.length);
                            console.log(canNotSetDays.indexOf(9));

                        }
                    });

                    console.log('***********after ajax ***********');

                    //此處是可以獲取canNotSetDays的值的,並能查詢到其中的元素數字9
                    console.log(canNotSetDays);
                    console.log(canNotSetDays.length);
                    console.log(canNotSetDays.indexOf(9));

                    console.log('**********delay two seconds************');

                    setTimeout(function(){
                        //延遲2秒後肯定也是可以獲取canNotSetDays的值的,並能查詢到其中的元素數字9
                        console.log(canNotSetDays);
                        console.log(canNotSetDays.length);
                        console.log(canNotSetDays.indexOf(9));
                    }, 2000);