循环发送ajax请求的解决方法

前端之家收集整理的这篇文章主要介绍了循环发送ajax请求的解决方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天需要用js 循环发送ajax请求,获取信息,

一开始,就直接按照逻辑写,

for(var i=0; i<items.length; i++){
	api_url = items[i].url;
	console.log(i);
	$.ajax({
		type: 'get',url: api_url,dataType: "json",async: false,success: function(json){
			console.log("test");
			var img = json.img;
		},error: function(data){
			
		}
	});
}

按照正常思维,程序应顺序执行,输出应该如下:

1

test

2

test

...

...

实际结果却非如此,输出如下:

1

2

3

...

test

test

test

而且得到的img还都是一样的,

这个结果,显然不是我要的,怎么办,想了很久,查资料,

参考:http://www.oschina.net/code/snippet_574558_13233

http://zhidao.baidu.com/link?url=XpEn58sMKMWzVF7FIAilpvEfA-AOSahtNFF1_VJrXtEvs3bNE0I_frvxiviczkVBHXkX5WQ18eVTfdJlgeAEh_


终于搞定,运用递归,代码如下:

currentIndex = 0;
function getImg(){
	if(currentIndex>=items.length){ 
		return;
	}
	var url = item[url];
	console.log(i);
	$.ajax({
		type: 'get',url: url,cache: true,success: function(json){
			currentIndex++;
			console.log("test");
			var img = json.img;

			getImg();
		},error: function(data){
			console.log("error...");
			currentIndex++;
			getImg();
		}
	});
}

通过以上写法,结果如下:

1

test

2

test

...

...


js的异步,有时候坑死人啊!

原文链接:https://www.f2er.com/ajax/162615.html

猜你在找的Ajax相关文章