天天看點

ajax如何循環lis,關于js中循環周遊中順序執行多個嵌套ajax的問題

就是業務上需要完成一個功能,這個功能需要依次調用四個接口,後面接口的參數都依賴于前一個接口的傳回值。

類似這樣:

var objArr = "從其他邏輯獲得";

for(var n in objArr){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:objArr[n].xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data) {

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:data.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data1) {

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:data1.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data2) {

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:data2.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data3) {

if(n = data3.length){

alert("全部完成");

}

}

});

}

});

}

});

}

});

}

但是事實不與願為,因為什麼呢?這個js裡的循環,每次都是自顧自的走,它不等ajax執行好走完到success代碼,就繼續循環下一條資料了,這樣資料就全亂了。

後來,想到試試ajax裡async這個屬性,async預設是true,即為異步方式,那我改為false同步行不行呢?答案是也是不行,阻塞在那了。

然後把每一個ajax都寫一個方法,調相應的方法,測試也是無效。

最後搞半天換了個思路,不是從技術上解決的,這個問題的關鍵是循環資料的時候,ajax的資料是依賴等待傳回的,隻要涉及到周遊循環,那這個問題就肯定存在。

那能不能避開循環呢?想到一個方法,這四個ajax分别寫四個方法,這四個方法都有固定的兩個參數,一個是我們要使用的資料objArr,一個是一個計數器num,這樣

var objArr = "從其他邏輯獲得";

for(var n in objArr){

xxxA(objArr,0);

}

function xxxA(objArr, num){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:objArr[num].xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data) {

xxxB(objArr, num, data);

}

});

}

function xxxB(objArr, num, back){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:back.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data1) {

xxxC(objArr, num, data1);

}

});

}

function xxxC(objArr, num, back){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:back.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data2) {

xxxC(objArr, num, data2);

}

});

}

function xxxD(objArr, num, back){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:back.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data3) {

if(num = arrObj.length-1){

69 alert("全部完成");

70 }else{

71 xxxA(objArr,num+1);

72 }

}

});

}

它的大緻思路是 分為四個方法,每個方法都有兩個參數,一個要周遊的資料,一個計數器,BCD三個方法還有個參數,就是上一個方法傳回的資料,  先調A,A裡面再調B,B裡面再調C,C裡面再調D,D裡面判斷一下,如果num = arrObj.length-1就代表全部走完,沒有就繼續再調A,依次循環。

關于js中循環周遊中順序執行ajax的問題(vue)

js裡的循環,每次都是自顧自的走,它不等ajax執行好走完到success代碼,就繼續循環下一條資料了,這樣資料就全亂了. 後來,想到試試ajax裡async這個屬性,async預設是true,即為異 ...

Java循環周遊中直接修改周遊對象

Java 循環周遊中直接修改周遊對象如下,會報異常: for (ShopBaseInfo sp: sourceList) { if(sp.getId()==5){ sourceList.remove( ...

JAVA中循環周遊list有三種方式

轉自:https://blog.csdn.net/changjizhi1212/article/details/81036509JAVA中循環周遊list有三種方式for循環.增強for循環(也就是常 ...

js 各種循環周遊

js 各種循環周遊(表格比較) 周遊方法 能否周遊數組 能否周遊對象 備注 for 能 不能 for in 能(有諸多缺點) 能 為周遊對象而設計的,不适用于周遊數組 forEach 能 不能 bre ...

js并行加載,順序執行

js并行加載,順序執行 運作腳本或加載外部檔案時,會阻塞頁面渲染,阻塞其他資源的加載.如果頁面中需要加載多個js檔案,在古老浏覽器中性能會比較糟糕. 是以有了最原始的優化原 ...

jquery each循環周遊完再執行的方法 因為each是異步的 是以要加計數器.

query each循環周遊完再執行的方法因為each是異步的 是以要加計數器.var eachcount=0;$(“.emptytip”).each(function(){ eachcount++c ...

jquery each循環周遊完再執行的方法

jquery each循環周遊完再執行的方法 因為each是異步的 是以要加計數器. var eachcount=0;

$(".emptytip").eac ...      

Python的list循環周遊中,删除資料的正确方法

在周遊list,删除符合條件的資料時,總是報異常,代碼如下: num_list = [1, 2, 3, 4, 5] print(num_list) for i in range(len(num_lis ...

随機推薦

jQuery之$(document).ready()使用介紹

學習jQuery的第一件事是:如果你想要一個事件運作在你的頁面上,你必須在$(document).ready()裡調用這個事件 學習jQuery的第一件事是:如果你想要一個事件運作在你的頁面上,你必須 ...

【WCF--初入江湖】01 WCF程式設計概述

01 WCF程式設計概述 SOA的優點 1.服務獨立于平台和工作環境.服務并不關心自己所處的環境,也不關心與之進行通信的服務所處的    環境. 2.服務互相隔離. 3.服務對協定.格式和傳輸中立. 4. ...

ES6學習筆記(二)

1.數組的解構指派 基本用法 ES6允許按照一定模式,從數組和對象中提取值,對變量進行指派,這被稱為解構(Destructuring). 以前,為變量指派,隻能直接指定值. var a = 1; va ...

MYSQL 退出的三個方式

方式1: exit 方式2: quit 方式3: \q

七、cocos2dx之粒子系統

本文由qinning199原創,轉載請注明:http://www.cocos2dx.net/?p=66 一.介紹 粒子系統指的是一個使用大量很小的精靈或者其他的一些繪制對象模拟一些模糊效果.使用傳統的 ...

MySQL 字元串連接配接CONCAT()函數

MySQL字元串連接配接函數 使用方法:CONCAT(str1,str2,-) 傳回結果為連接配接參數産生的字元串.如有任何一個參數為NULL ,則傳回值為 NULL. 注意:如果所有參數均為非二進制字元串, ...

python讀寫檔案\r\n問題

newline controls how universal newlines mode works (it only applies to text mode). It can be None, ' ...

解決pycharm啟動慢

xms -xmx相關參數設定 打開pycharm的安裝目錄 D:\PyCharm\PyCharm 2018.2.3\bin下檔案pycharm.exe.vmoptions修改預設(版本2016.2)的 ...

10.4 再探疊代器-插入/IO/反向

10.4.1 插入疊代器 插入疊代器接受一個容器,生成一個疊代器,通過向該疊代器指派可以實作向容器添加元素 (1)back_inserter: 接受一個參數, 示例: auto iter = back ...

第一章 HTML+CSS(上)

HTML 網頁的組成 HTML簡介 HTML的文法 HTML的常用标簽 HTML中的表格和表單 CSS的簡單應用 我們這裡使用WebStorm開發工具 配置浏覽器 常用插件: CodeGlance 代 ...