如何使Jquery $ .each循环在迭代之前等待操作完成？

Question

我有一个函数，该函数具有$ .each来遍历对象的键并执行操作。 在此循环中，我正在调用一个函数，该函数依次调用服务器以获取一些数据并在回调中对其进行处理。 这些调用是异步的，因此$ .each不会等待数据到来并且回调函数将执行其应有的工作并保持迭代。 我如何使$ .each循环等到我完成操作然后继续。

$.each(messages,function(key) {  
//do something 
if(some Condition) {
getfromserver(token,myCallback); }
//do something 
});




function myCallback(data)
 {
   //do something with data
 }

Answer 1

您可以这样做，而不是$.each ，我称之为回调循环：

iterate(messages, 0);

function iterate(arr, i) {
    if(i==arr.length) return;
    var message = arr[i];
    //you might want to create your token based on current message
    var token = "...";

    if(/*some Condition*/){
        getfromserver(token, function (data) {
            myCallback(data);
            iterate(arr, i++);
        });
    }
    //use this else if you want to do something like 'continue'
    //and don't use it if it kinda 'break'
    else iterate(arr, i++);
}

function myCallback(data) {
    //do something with data
}

Answer 2

您无法进行简单的迭代。 相反，您应该这样做：

function unqueue() {
  if (!messages.length)
    return;
  var key =  messages.pop();
  // do something
  getfromserver(token, myCallback);
  //do something
}

function myCallback(data) {
  //do something with data

  // Repeat it until messages is not empty
  unqueue();
}

unqueue();

Answer 3

将循环添加到回调中的基本思想

var messages = {foo:"1","bar":2,"asdf":3}; 
var keys = $.map(messages, function(val, key) { return key});

function makeCall() {
   if(!keys.length) return;
   var next = keys.shift();
   var token = messages[next];
   getfromserver(token,myCallback);
}

function myCallback(data)
 {
   //do something with data
   makeCall();
 }

建立呼叫队列有很多方法。

Answer 4

这是在coffeescript中，但是我认为它可以满足您的需求。 您不断将执行向前抛出到一个函数中，就像在nodejs中一样：

processMessages = (messages, callback, args) ->
    # End it by returning the callback result when messages are done
    return callback() unless messages.length

    # Shift the first message off the list
    message = messages.shift()

    # Send it to the server for something to do
    $.ajax
        url: '/echo/json/'
        method: 'POST'
        data:
            json: JSON.stringify({ message: message, args: args })
        dataType: 'json'
        success:(data) ->
            # Respond to the server's response
            console.log 'Got ' + data.message

            # Process the remaining messages
            processMessages messages, callback, args

finished = ->
    console.log 'all done here'

processMessages ['hi', 'bob'], finished, 'yo'

Coffeescript： http : //jsfiddle.net/datashaman/22gDa/3/

JavaScript分叉： http : //jsfiddle.net/datashaman/3zdQ8/1/