Question

当我多次运行$ .ajax时，在继续运行我的代码之前似乎没有等待ajax调用完成。当我使用jsonp时，设置'async：false'不起作用（或者我读过）。我必须使用jsonp来访问Media Wiki api，因此更改它不是一个选项。我是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（constellation）'的jsonp对象，它位于列表的中间。尽管在articleList中为每篇文章调用了回调函数，但这是我得到的唯一对象。

Answer 1

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

顺便说一句，请避免使用 async：false ，除非您100％确定需要使用$ .when（）来完成同步调用。完成/然后/总是< / p>

正如@charlietfl指出的那样，async：false不适用于jsonp调用。

来自jQuery文档：

默认情况下，所有请求都是异步发送的（即设置为默认为true）。如果需要同步请求，请将此选项设置为假。跨域请求和dataType：＆＃34; jsonp＆＃34;请求没有支持同步操作

Answer 2

尝试这样的事情（未经测试）：

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，Promise.all等待所有promises解析然后回调。

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

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

3 个答案: