讓我的AJAX按順序

Question

我從來沒有用JavaScript或jQuery好，但我最近的項目要求我變得更好。我正在嘗試爲網站創建一個小部件。這個小部件使用ajax從另一個域訪問json數據。這個小部件可能在同一頁面上有多個實例，每個實例都有不同的設置。

我正在使用JQuery來查找具有特定類的所有元素，這將識別小部件需要去的位置。我使用自定義數據屬性來存儲每個小部件的容器設置。

我遇到的問題是這樣的;

因爲ajax請求是異步的，所以結果以有效的隨機順序進來。代碼IHAVE到目前爲止

<script> 
    var currentContainer; 
    $(document).ready(function(){ 
     $($(".container")).each(function(index){ 
       currentContainer = this; 
       var url = 
        "http://example.com/json.php?iid="+$(this).data("owner_id")+ 
        "&iid="+$(this).data("item_id")+ 
        "&l="+$(this).data("layout")+ 
        "&callback=?"; 

       var request = $.get(url,function(data){ 
        console.log(data) 
        display(data.oid,data.iid,data.l); 
       },"jsonp"); 
     });   
    }); 

    function display(oid,iid,l){ 
     $(currentContainer).html("Owner Id = "+oid+" Item Id = "+iid+" Layout = "+l); 
    } 

和身體....

<div class="container" data-owner_id="George" data-item_id="car" data-layout="tidy">-</div> 
<div class="container" data-owner_id="tim" data-item_id="computer" data-layout="allovertheplace">-</div> 
<div class="container" data-owner_id="dee" data-item_id="hammer" data-layout="effingmess">-</div> 

結果我得到的是僅在最後的隨機數據。任何想法非常感謝！

Answer 1

在這種情況下不要使用全局變量。將currentContainer作爲參數傳遞給顯示函數。

var currentContainer = this; 

... 

var request = $.get(url,function(data){ 
        console.log(data) 
        display(currentContainer, data.oid,data.iid,data.l); 
       },"jsonp"); 

... 

function display(currentcontainer, oid, iid, l) { 
... 

Answer 2

的問題是在該行：

$(currentContainer).html("Owner Id = "+oid+" Item Id = "+iid+" Layout = "+l); 

當你通過與container類（$($(".container")).each）的div循環，你要指定currentContainer到你的工作股利。因此，最後，currentContainer指的是類container的最後一個元素。

在display中，您要選擇div以使用其屬性data。您可以使用jQuery的屬性選擇器進行這種選擇$("[attribute='val']")