如何通过列表运行$ .ajax？

Question

When I run $.ajax multiple times, it doesn't seem to wait for the ajax call to finish before continuing to run my code. As I am using jsonp, setting 'async: false' doesn't work (or so I've read). I have to jsonp to access the Media Wiki api, so changing that isn't an option. I am a beginner at Javascript, is this something I could use a 'promise' for?

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

The output I get is the jsonp object of 'Poop (constellation)', which is in the middle of the list. That's the only object I get, despite calling the callback function for each article in articleList.

Answer 1

Have a look on jQuery documentation on how $.when() function works, I think that may help you :)

Btw, avoid using async: false unless you are 100% sure that you need a sync call that can't be archieved with $.when().done/then/always

As @charlietfl pointed, async: false doesn't work with jsonp calls.

From jQuery Documentation:

By default, all requests are sent asynchronously (ie this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation

Answer 2

Try something like this (untested):

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

The ajax call returns a promise, Promise.all waits until all promises are resolved then calls back.

Answer 3

Try my example.

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