我必须在循环上发出一系列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。我甚至尝试异步:false。这没有帮助。我在某处读到JSONP无法使用async:false。请帮帮我。
答案 0 :(得分:6)
不要使用for循环。使用递归函数:
var i = 1;
function loadNext(){
if (i < 5){
$.ajax({
type: "GET",
url: "results/result_html.php?usn="+i+"&resultType="+resultType,
dataType:"JSON",
success:function(result){
finalResult+=result;
result=result+htmlMessage;
$("#info").hide();
$("#result").html(result);
$("#usn").attr("placeholder", "Class USN");
loadNext();
}
});
i++;
}
}
答案 1 :(得分:4)
你可以使用占位符。
$.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);
}
});
});
答案 2 :(得分:2)
类似的东西:
// iterate over your set
$.each(myset, function(i,e){
// placeholder div (hidden from view until it's populated)
var $placeholder = $('<div>').hide().appendTo('div.content');
// make your ajax call
$.getJSON('/link/to/resource','{date:here}',function(d){
// insert the content in to the div and re-show it
$placeholder.text(i + ': ' + d.movies[0].title).show();
});
});
答案 3 :(得分:0)
const j = 10;
for (let i = 1; i <= j; i++) {
// wait for the promise to resolve before advancing the for loop
await ajaxcall(i);
console.log(i);
}
}
function ajaxcall(id){
return new Promise(function(resolve, reject){
var sUrl = "https://jsonplaceholder.typicode.com/todos/"+id;
$.get(sUrl, function(data) {
alert( "Load was performed."+JSON.stringify(data));
resolve(data);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="someFunction()"> Test </button>