javascript - 让我的 ajax 井然有序

Question

我从来都不擅长 JavaScript 或 jquery，但我的最新项目要求我变得更好。我正在尝试为网站创建一个小部件。这个小部件使用 ajax 从另一个域访问 json 数据。此小部件可能在同一页面上有多个实例，每个实例都有不同的设置。

我正在使用 JQuery 查找具有特定类的所有元素，该类将标识小部件需要去往的位置。我正在使用自定义数据属性将每个小部件的设置存储在容器中。

我遇到的问题是这个；

因为 ajax 请求是异步的，所以结果以有效的随机顺序出现。到目前为止我的代码是

<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);
    }

在 body 里....

<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) {
...