Jquery - 按顺序循环ajax

时间:2016-02-11 00:08:45

标签: javascript jquery ajax

所以我有一些需要更新的东西,但由于async:false已被弃用,需要逐个显示更新的进度,是否可以通过ajax.success执行此操作?,例如:

progressUpdate(stuff[0].name, 100 / stuff.length)
for(var f = 0; f < stuff.length; f++){

  $.ajax({
    type: "PUT",
    global: true,
    url: '/stuffs/'+stuff[f].id+'.json',
    contentType: 'application/json', 
    dataType: 'script', 
    data: JSON.stringify({stuff:{set: 1}, _method:'put'})
  });


  //Wait here to finish updating, then continue increase the progressbar

  progressUpdate(stuff[f].name, 100 / stuff.length)     
}

我尝试将progressUpdate()置于成功之内,但不是数组的顺序,因为它在重新回调时更新,一些后部元素在前一个元素之前完成,就像这样

....
.success: funcion(){
  progressUpdate(stuff[f].name, 100 / stuff.length)
}
....

有没有办法按顺序进行这种进展?

2 个答案:

答案 0 :(得分:2)

这个怎么样?

do_job(stuff, 0); // Launch first job

function do_job(stuff, index) {
  if (index < stuff.length)
  {
    $.ajax({
      type: "PUT",
      global: true,
      url: '/stuffs/'+stuff[f].id+'.json',
      contentType: 'application/json', 
      dataType: 'script', 
      data: JSON.stringify({stuff:{set: 1}, _method:'put'}),
      success: function(data) {
        // Job finished, let's begin the next one
        progressUpdate(stuff[index].name, 100 / stuff.length)   
        do_job(stuff, index + 1); // actual index (your variable "f") + 1
      }
    });
  } else {
    // every stuff is finished
  }
}

答案 1 :(得分:0)

使其按顺序更新内容的一种方法是仅在前一次成功时调用下一次更新。像这样的东西

function updateStuff(f){
   if(f < stuff.length){
      ajax stuff ...
      success: funcion(){
         progressUpdate(stuff[f].name, 100 / stuff.length)
         updateStuff(f+1);
      }
   }
}

调用updateStuff(0)开始递归。