Javascript 无阻塞的多个AJAX调用

我每60秒运行一个名为

checker

的函数，如下所示：

setInterval( checker, 60 * 1000 );

checker

有一个通过AJAX检查的URL数组，当前代码如下：

$.ajax({
  url: sites[i].url,
  type: "GET",
  dataType: "json",
  async: false,
  success: function(data){
     //blah blah blah
  }else{
     //something else
  },
  error: function(){
    //blah blah blah
  }
});

代码可以工作，根据JSON的结果更改一些基于UI的内容。我的问题是，检查多个站点的执行时间约为4秒，此时页面将失去响应。如果删除

async:false

，代码将不再按预期工作

有人提到使用回调来解决问题，但不明白在这种情况下如何使用回调

编辑

根据adosan的建议更新代码：

function promtest(){
    var sites = [
             { name: "WorkingSite", url: "http://sitename.com/testing.php" },
             //a bunch more sites, 1 returns a 404 to test for failure
             { name: "404Site", url: "http://404url.com/testing.php" }
             ];

    var promiseList = [];
    for(var i in sites){
    var promise = $.ajax({
    url: sites[i].url,
    type: "GET",
    dataType: "json",
    async: true,
    success: function(data){

      if( data.Response != 'OK' ){
        console.log('Site ' + sites[i].name + ' Not OK' );
      }else{
        console.log( 'Site ' + sites[i].name + ' OK ');
      }
    },

    failure: function(data){
      console.log('Failure for site: ' + sites[i].name);
    },

    error: function(){
      console.log('Site ' + sites[i].name + ' Not OK' );
    }

    });

    promiseList.push(promise);
    }

    $.when.apply($, promiseList).then(function(){console.log('success')}, function(){console.log('fail')});

}

在控制台中，我看到：

Site 404Site Not OK
Site 404Site Not OK
Site 404Site Not OK
Site 404Site Not OK
Site 404Site Not OK
Site 404Site Not OK
Site 404Site Not OK
fail
Site 404Site Not OK
Site 404Site Not OK
Site 404Site Not OK
Site 404Site Not OK

请注意，站点名称始终显示为列表中的最后一个名称。

您可以在此处使用Promise（）。例如：

function checker(url) {
    return new window.Promise(function (resolve, reject) {

        function successCallback(response) {
            resolve(response);
        }

        function errorCallback(response) {
            reject(response);
        }

        $.ajax({
            data: data,
            dataType: 'JSON',
            type: 'GET',
            url: url
        })
        .done(successCallback)
        .fail(errorCallback);
    });
}

function checkerSuccess(response) {
    console.log(response);
}

function checkerError(error) {
    console.warn(error);
}

checker('http://api.example.com').then(checkerSuccess).catch(checkerError);

你可以在这里使用Promise（）。例如：

function checker(url) {
    return new window.Promise(function (resolve, reject) {

        function successCallback(response) {
            resolve(response);
        }

        function errorCallback(response) {
            reject(response);
        }

        $.ajax({
            data: data,
            dataType: 'JSON',
            type: 'GET',
            url: url
        })
        .done(successCallback)
        .fail(errorCallback);
    });
}

function checkerSuccess(response) {
    console.log(response);
}

function checkerError(error) {
    console.warn(error);
}

checker('http://api.example.com').then(checkerSuccess).catch(checkerError);

我想试试这个

假设要更新的对象是var foo：

var foo = "";

$.ajax({
      url: sites[i].url,
      type: "GET",
      dataType: "json",
      async: false,
      success: function(data){

          foo = data.gottenValue1

      }else{
         //something else
      },
      error: function(){
        //blah blah blah
      }
    });

我想试试这个

假设要更新的对象是var foo：

var foo = "";

$.ajax({
      url: sites[i].url,
      type: "GET",
      dataType: "json",
      async: false,
      success: function(data){

          foo = data.gottenValue1

      }else{
         //something else
      },
      error: function(){
        //blah blah blah
      }
    });

---

您可以使用jQuery内置的延迟机制（承诺）

ajax函数确实返回一个promise对象，该对象可以作为变量

承诺的好处在于，你可以将多个承诺组合成一个更大的承诺

var promiseList = [];
promiseList.push(promise);
$.when.apply($, promiseList).then(function(){/*SUCCESS*/}, function(){/*FAILURE*/});

完整的代码应该是这样的：

var promiseList = [];
for(var i in sites){
    var promise = $.ajax({
      url: sites[i].url,
      type: "GET",
      dataType: "json",
      async: true
    });

    promiseList.push(promise);
}
$.when.apply($, promiseList).then(function(){/*SUCCESS*/}, function(){/*FAILURE*/});

---

您可以使用jQuery内置的延迟机制（承诺）

ajax函数确实返回一个promise对象，该对象可以作为变量

承诺的好处在于，你可以将多个承诺组合成一个更大的承诺

var promiseList = [];
promiseList.push(promise);
$.when.apply($, promiseList).then(function(){/*SUCCESS*/}, function(){/*FAILURE*/});

完整的代码应该是这样的：

var promiseList = [];
for(var i in sites){
    var promise = $.ajax({
      url: sites[i].url,
      type: "GET",
      dataType: "json",
      async: true
    });

    promiseList.push(promise);
}
$.when.apply($, promiseList).then(function(){/*SUCCESS*/}, function(){/*FAILURE*/});

---

---

请详细说明，当您删除async:false设置时，什么不起作用。您是否考虑过异步运行它（

async:true

）？我认为上面的代码不起作用。。。else在函数之外。删除

async:false

或将其设置为

true

时，控制台会抛出各种错误，看起来似乎是因为事情可能不会返回，从而使一切都变得混乱。请详细说明，当您删除async:false设置时，什么不起作用。您是否考虑过异步运行它（

async:true

）？我认为上面的代码不起作用。。。else不在函数范围内。删除

async:false

或将其设置为

true

，控制台会抛出各种错误，这看起来似乎是因为事情可能不会返回，从而使一切都变得混乱。这看起来很有希望，不是双关语，让我来检查一下。此解决方案比回调要好得多，同时也是非阻塞的，所需代码更少，更易于维护。谢谢这看起来很有希望，不是双关语，让我来看看。这个解决方案比回调要好得多，同时也不阻塞，所需代码更少，更易于维护。感谢当我替换

$.when.apply（$，promiseList）。然后（function（）{/*SUCCESS*/}，function（）{/*FAILURE*/}）$.when.apply（$，promiseList）。然后（function（）{console.log（'success'）}，function（）{console.log（'fail'））

，我有10个站点，其中一个应该失败。我在“网络监视器”中看到每个站点按预期返回，但控制台包含一个“失败”，没有成功的站点。如果我从列表中删除测试失败的站点，那么我将获得“成功”，因此此方法似乎只有在所有站点返回工作值时才有效。我需要能够根据列表中每个站点的状态执行操作，例如，成功或失败。如果任何内部承诺失败，则相关承诺不会失败。如果要在代码中检测失败的站点，还应在ajax调用中添加错误处理程序：error:function（data）{console.log（sites[i].url+“has failed.”我已经更新了我的问题，以显示我尝试了什么以及我得到的输出。我在开发人员工具的“网络”选项卡中看到了正确调用的站点，但在使用console.log时，所有站点[I]。打印的名称是相同的？这是由javascript的关闭引起的。简短的解释是，在执行

success

或

error

函数期间，回调代码会看到

i

变量的当前值（在for循环完成后为9）。请尝试使用自动执行函数包装ajax调用，并将

i

变量作为参数传递。如下所示：

（函数（i）{var promise=$.ajax（…）；}）（i）；

当我替换

$.when.apply（$，promiseList）。然后（函数（）{/*SUCCESS*/}，函数（）{/*FAILURE*/}）；

当.apply（$，promiseList）。然后（函数）（）{console.log（'success'）}，function（）{console.log（'fail'}），我有10个站点，其中一个应该失败。我在“网络监视器”中看到每个站点按预期返回，但控制台包含一个“失败”，没有成功的站点。如果我从列表中删除测试失败的站点，那么我将获得“成功”，因此此方法似乎只有在所有站点返回工作值时才有效。我需要能够根据列表中每个站点的状态执行操作，例如，成功或失败。如果任何内部承诺失败，则相关承诺不会失败。如果要在代码中检测失败的站点，还应在ajax调用中添加错误处理程序：error:function（data）{console.log（sites[i].url+“has failed.”我已经更新了我的问题，以显示我尝试了什么以及我得到的输出。我在开发人员工具的“网络”选项卡中看到了正确调用的站点，但在使用console.log时，所有站点[I]。打印的名称是相同的？这是由javascript的关闭引起的。简短的解释是，在执行

success

或

error

函数期间，回调代码会看到

i

变量的当前值（在for循环完成后为9）。请尝试使用sel包装ajax调用