如何使多个ajax请求在循环中顺序返回值？

Question

我必须在循环上进行一系列Ajax请求。其中约有100个。每个请求都返回一个JSONP变量。我从JSON提取数据，并将该值附加到div中。问题是我希望div以函数调用的顺序附加数据。即顺序。现在，我每次刷新页面时都会得到不同的顺序，具体取决于请求完成的顺序。这是我的代码。

  $.each(elem, function (index, item) {

            $.ajax({
                type: 'post' ,
                url: moviesSearchUrl + '&q=' + encodeURI(item) + '&page_limit=1',
                dataType: "jsonp",
                async: false, 
                success: searchCallback
            });

            function searchCallback(data) {
                var movies = data.movies;

                var markup = index + ': '+   movies[0].title + '<img class=" bord" src="' + movies[0].posters.thumbnail + '" /><br/>';

                $("div.content").append(markup);
            }

        });
});

当我在div中显示索引值时，每次我得到随机订单。有时是2 4 3 1 7，有时是1 5 2 7
4。我什至尝试async：false。那没有帮助。我在某处读到JSONP无法使用async：false来完成。请帮帮我。

Answer 1

您可以使用占位符。

  $.each(elem, function (index, item) {

            var $placeholder = $('<div>').appendTo("div.content");

            $.ajax({
                type: 'post' ,
                url: moviesSearchUrl + '&q=' + encodeURI(item) + '&page_limit=1',
                dataType: "jsonp",
                async: false, 
                success: searchCallback
            });

            function searchCallback(data) {
                var movies = data.movies;

                var markup = index + ': '+   movies[0].title + '<img class=" bord" src="' + movies[0].posters.thumbnail + '" /><br/>';

                $placeholder.replaceWith(markup);
            }

        });
});