我使用对 Giphy 的 API 调用来循环遍历字符串数组并为字符串中的每个单词返回 Gif。
它正在工作,但结果显示不按顺序。
数组的开头是:“STATELY, PLUMP BUCK MULLIGAN CAME FROM THE STAIRHEAD”
结果显示如下:Plump Mulligan Came Buck...你明白了...
代码如下:
var chapter = "STATELY, PLUMP BUCK MULLIGAN CAME FROM THE STAIRHEAD,"
let words = chapter.split(" ");
for (i=0; i<words.length; i++){
let word = words[i];
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
$.ajax({
url: queryURL,
method: 'GET'
})
.done(function(response) {
var results = response.data;
var gifDiv = $('<div/>');
var gif = $('<img/>');
gif.addClass('myImg');
gif.attr('src', results[0].images.fixed_height.url);
gif.attr('data-animate', results[0].images.fixed_height.url)
gif.attr('data-state', 'still');
gifDiv.append(gif);
gifDiv.append('<h1>' + word + '</h1>');
gifDiv.appendTo($('#gifs-here'));
})
};
有什么想法为什么结果乱序吗?
最佳答案
两个选项
尽快发出所有请求,但按顺序处理结果
$.when(...chapter.split(" ").map(word => {
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
return $.ajax({
url: queryURL,
method: 'GET'
});
})).then((...responses) => {
responses.forEach(response => {
var results = response.data;
..... rest of your done code .....
});
})
串行发出请求并处理结果,每个请求等待前面的处理完成
chapter.split(" ").reduce((p, word) => {
return p.then(() => {
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
return $.ajax({
url: queryURL,
method: 'GET'
}).then(response => {
var results = response.data;
..... rest of your done code .....
});
});
}, $.when())
为了完整起见,由于 jQuery $.ajax 返回一个 thenable
...您可以使用 Promises
Promise.all(chapter.split(" ").map(word => {
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
return $.ajax({
url: queryURL,
method: 'GET'
});
})).then(responses => {
responses.forEach(response => {
var results = response.data;
..... rest of your done code .....
});
})
和
chapter.split(" ").reduce((p, word) => {
return p.then(() => {
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
return $.ajax({
url: queryURL,
method: 'GET'
}).then(response => {
var results = response.data;
..... rest of your done code .....
});
});
}, Promise.resolve());
关于javascript - Giphy API 调用返回无序结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50265793/