解决在循环中使用ajax异步时,数据的同步问题

前端之家收集整理的这篇文章主要介绍了解决在循环中使用ajax异步时,数据的同步问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这个标题看起来有点儿拗口,说白就是,在for循环中使用ajax的异步同步数据时,如何按照给定数据的先后顺序去执行呢?这个是困扰了我好几天的问题,今天终于解决了,使用的是jquery的Deferred,具体代码如下:

var data = ['one','two','three','four','five','six','seven','eight'];

var defer = $.Deferred();
//这一步必须要写,要不然下面的then无法使用
defer.resolve($("#showContent").append("这个里面可以什么都不写<br/>"));


$.each(data,function(i,e){
  defer = defer.then(function () {
  	return $.ajax({
    	url:'/echo/json/',method:'get',beforeSend:function(){
        $("#showContent").append(e + "开始数数<br/>");
      },success:function(data){
      	$("#showContent").append(e + "执行完成<br/>");
        //如果返回的结果有问题,这里可以用return false退出循环
      }
    })
  });
});


defer.done(function(){
	$("#showContent").append("ajax全部执行完成<br/>")
});

通过上面的例子可以很好的看到,程序是按照数组的顺序执行的,这样即用到了异步,而且还保证了执行顺序,不错的方法在线演示

猜你在找的Ajax相关文章