如何在列表中运行$.ajax？

Question

当我多次运行$.ajax时，似乎不需要等到ajax调用完成后再继续运行我的代码。由于我使用的是jsonp，设置‘异步: false’不起作用(至少我已经读过了)。我必须使用jsonp来访问Media，所以改变它不是一种选择。我是Javascript的初学者，这是我需要“承诺”的东西吗？

var articleList = ['Abaft', 'Aspect-oriented%20programming', 'Defecation', 'Feces', 'Perl%20Object-Oriented%20Persistence', 'Poop%20(constellation)', 'Poop%20deck', 'Pooper-scooper', 'Poopy', 'Stern', 'Zoboomafoo'];

function retrieveSummary(jsonp) {
  console.log(jsonp);
}

function fetchSummary() {
  for (var article in articleList) {
    $.ajax({
      url: 'https://en.wikipedia.org/w/api.php?action=parse&page=' + article + '&prop=text&format=json&section=0&callback=?',
      dataType: 'jsonp',
      contentType: 'application/json',
      jsonpCallback: 'retrieveSummary',
    });
  }
}

我得到的输出是'Poop (星座)‘的jsonp对象，它位于列表的中间。这是我得到的唯一对象，尽管对articleList中的每一篇文章都调用了回调函数。

Answer 1

尝试这样的方法(未经测试)：

var articleList = ['Abaft', 'Aspect-oriented%20programming', 'Defecation', 'Feces', 'Perl%20Object-Oriented%20Persistence', 'Poop%20(constellation)', 'Poop%20deck', 'Pooper-scooper', 'Poopy', 'Stern', 'Zoboomafoo'];

Promise.all(articleList.map(function(article) {
    return $.ajax({
        url: 'https://en.wikipedia.org/w/api.php?action=parse&page=' + article + '&prop=text&format=json&section=0&callback=?',
        dataType: 'jsonp',
        contentType: 'application/json',
    });
  })).then(function(results) {
    console.log(results);
});

ajax调用返回一个承诺，Promise.all等待所有承诺被解析后再调用。

Answer 2

查看关于jQuery函数如何工作的$.when()文档，我认为这可能对您有所帮助:)

顺便说一句，避免使用异步: false，除非您100%确信您需要一个不能与$.when()..done/ call归档的同步调用

正如@charlietfl所指出的，异步: false不适用于jsonp调用。

来自jQuery文档：

默认情况下，所有请求都是异步发送的(即默认设置为true )。如果需要同步请求，请将此选项设置为false。跨域请求和dataType："jsonp“请求不支持同步操作。

Answer 3

试试我的例子。

function Timer() {
    this.interval = 1000;
    this.maxloop = 0; //max loop.
    this.onTimerLoop = function () {
    };
    this.onTimerStop = function () {
    };
    var global = this;
    var count = 0;
    var taskID = -1;
    var isWorking = false;
    this.start = function () {
        if (taskID === -1) {
            count = 0;
            isWorking = false;
            taskID = window.setInterval(function () {


                if (!isWorking) {
                    count += 1;
                    isWorking = true;
                    if (global.maxloop > 0 && (count > global.maxloop)) {
                        global.stop();
                    } else {
                        global.onTimerLoop();
                    }
                    isWorking = false;
                }


            }, global.interval);
        }

    };
    this.stop = function () {
        if (taskID !== -1) {
            window.clearInterval(taskID);
            taskID = -1;
            global.onTimerStop();
        }
    };



}

var articleList = ['Abaft', 'Aspect-oriented%20programming', 'Defecation', 'Feces', 'Perl%20Object-Oriented%20Persistence', 'Poop%20(constellation)', 'Poop%20deck', 'Pooper-scooper', 'Poopy', 'Stern', 'Zoboomafoo'];
var timer = new Timer();
timer.interval = 300;
var currentPositionArticle = 0;
var lastCurrentPositionArticle = -1;
timer.onTimerLoop = function () {
    if (currentPositionArticle !== lastCurrentPositionArticle) {
        lastCurrentPositionArticle = currentPositionArticle;
        $.ajax({
            url: 'https://en.wikipedia.org/w/api.php?action=parse&page=' + articleList[currentPositionArticle] + '&prop=text&format=json&section=0&callback=?',
            dataType: 'jsonp',
            contentType: 'application/json',
            jsonpCallback: "retrieveSummary"
        });

        if (currentPositionArticle === articleList.length - 1) {
            timer.stop();
        }
    }
};
timer.start();

function retrieveSummary(jsonp) {
    currentPositionArticle++;
    alert(jsonp);
    wait = false;
}