等待函數完成，然後繼續執行$ .each函數中的下一個循環。

Question

我不是JS或jQuery的專家。我試着寫代碼的聊天應用程序，並像這樣：

• 獲取會話列表從一個AJAX調用
• 填充由API返回的談話網頁的左側窗格中
• 在左窗格填充所有對話後，將聊天列表項綁定到窗格的右側。

現在我遇到的問題是這個。從API調用獲取對話列表後，我遍歷列表並將每個項目綁定到窗格。 。每個函數在綁定函數執行完代碼塊之前進入下一次迭代。當具有$ .each迭代器的函數完成執行時，我使用「.done（）」來填充第一個對話項目的聊天記錄，但由於循環在所有對話被正確綁定之前完成，所以聊天列表是在我看到任何對話之前就會出現，因此，我無法將任何事件綁定到對話中。

我試圖實現的是等待綁定對話完成執行，然後繼續迭代

我的代碼如下：

function (data) { 
        $.each(data, function (index, value) { 

         if (value.toUser == loggeduser) { 
          var isMe = false; 
          getUser(value.fromUserID, function (user) { 
           if (user.picturename == 'none') { 
            bindConversationItem(value.chatMessages[0].message, user.username, 'nopic.png', value.conversationID); 
           } 
           else { 
            bindConversationItem(value.chatMessages[0].message, user.username, user.picturename, value.conversationID); 
           } 
          }); 
         } 
         else { 
          getUser(value.toUserID, function (user) { 
           var isMe = true; 
           if (user.picturename == 'none') { 
            bindConversationItem(value.chatMessages[0].message, user.username, 'nopic.png', value.conversationID); 
           } 
           else { 
            bindConversationItem(value.chatMessages[0].message, user.username, user.picturename, value.conversationID); 
           } 

          }); 
         } 
        }); 
       }).done(function (data) { 
        populateFirstConversation(data); 
        bindEvents(); 

       }); 

這是我的bindConversationItem功能

function bindConversationItem(message, username, userimage, index) { 
      var conv_item = '<li> <a href="#" conversation-index = '+index+' class="clearfix">' 
          + '<img src="http://localhost:1995/contents/member/' + userimage + '" alt="" class="img-circle">' 
          + '<div class="friend-name">' 
           + '<strong>' + username + '</strong>' 
          + '</div>' 
          + '<div class="last-message text-muted">' + message + '</div>' 
          + '<small class="time text-muted">Just now</small>' 
          + '<small class="chat-alert label label-danger">1</small>' 
         + '</a>' 
        + '</li>' 


      $("ul.friend-list").append(conv_item); 
     } 

我試過包裝在函數內部的代碼，並使用一個回調函數，但我似乎無法得到它的工作。任何解決方案在這裏表示讚賞

編輯

我有功能「的getUser」這是異步的每個循環這裏是什麼樣子：

  function getUser(userid, callback) { 
      $.ajax({ 
       url: 'http://localhost:1995//api/member/' + userid 
      }).done(callback) 
     } 

Answer 1

您可以使用.queue()，$.map()，.promise()回到依順序從異步調用的結果，執行任務時queueName所有功能已經完成

function processQueue (data) { 
 
    return $({}).queue("ajax", $.map(data, function(id) { 
 
    return function(next) { 
 
     return getUser(id, function(val) { 
 
     // do stuff when asynchronous function returns a value 
 
     return $("<div>", {html:"id:" + id + ", value:" + val * Math.PI}) 
 
     .appendTo("body").after("<br>"); 
 
     }, next) // pass `next` function 
 
    } 
 
    })).dequeue("ajax").promise("ajax") 
 
} 
 

 
function getUser(value, callback, next) { 
 
    // do asynchronous stuff, e.g., `$.ajax()` 
 
    return new $.Deferred(function(dfd) { 
 
    setTimeout(function() { 
 
     dfd.resolve(value * 10) 
 
    }, Math.floor(Math.random() * 1500)) 
 
    }) 
 
    // chain `.then()` which calls `callback`, and `.then()` 
 
    // which call next function in `"ajax"` queue 
 
    .then(callback).then(next) 
 
} 
 

 
var arr = [1, 2, 3, 4, 5]; 
 

 
var queue = processQueue(arr); 
 

 
// do stuff when queue completes 
 
queue.then(function(data) { 
 
    console.log("complete") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>

Answer 2

當然最好的解決方案是使用promises，但正如您所報告的，您對語言不太瞭解，此解決方案不會影響您的原始代碼：

改爲$ .each循環，每次執行一次迭代，然後c所有下一個回調火災時。

function (data) { 
    function done() { 
     populateFirstConversation(data); 
     bindEvents(); 
    } 

    function getNextConversation(index) { 
     if (index == data.length) 
      return done(); 

     var value = data[index]; 

     if (value.toUser == ...) { 
      getUser(..., function() { 
       ... 

       getNextConversation(index + 1); 
      }); 
     } else { 
      getUser(..., function() { 
       ... 

       getNextConversation(index + 1); 
      }); 
     } 
    } 

    getNextConversation(0); 
}