Javascript 在.each（）中使用.ajax（）

我正在尝试遍历.ball类的元素，并检查它们关联的url是否存在：

$(".ball").each(function(i){

    var url;

    var c_day = $(this).data('day');
    var c_mon = $(this).data('mon');
    var c_year = $(this).data('year');

    url = c_year + "/" + c_mon + "/" + c_day + ".html";

    $.ajax({

        url: url, 
        error: function()
        {
              alert('file: ' + url + '   does not exist');
        },
        success: function()
        {
            alert('file: ' + url + 'EXXXXXXISTS!!!!!');
            blogA[ blog_count ] = url;
            blog_count++;
            $(this).css("color", "red" );           
        }
    });
 });

---

我做了一些研究，并在中使用.ajax阅读了这篇文章。每一篇文章都会导致很多问题，但我无法集中精力解决它

---

问题是我得到了非常奇怪的结果（与异步有关？）。如果我在ajax之外警告url，它将正确地遍历元素。如果我在ajax中警告url，它会吐出属于类的最后一个元素的url。

类似这样的内容，以简化代码

function successHandler(url, ball) {
  return function(ret) {
     alert('file: ' + url + 'EXXXXXXISTS!!!!!');
     ball.css('color','red')
  }
}

var balls = $('.ball'), requests = []


balls.each(function(index, ball) {
  var url = ...
  requests.push($.ajax({ url : url , success : successHandler(url, ball) })
})

$.when.apply($, requests).done(function() {
  alert('all balls are checked')
}) 

或使用ES6：

const success = (url,ball)=>(ret)=>ball.css('color','red')

const balls = $('.balls')
    , reqs = balls.map( (b, i) => {
        const url = ...
        return $.ajax({url, success:success(url,ball)})
    })

$.when.apply($, reqs).done( (resps) => alert('all done'))

一点解释：您在回调中盲目地使用

this

，不知道它将在哪个上下文中执行。为了解决这个问题并将您的URL放入回调中，我们正在创建一个返回函数的函数，因此它将在上下文中具有当前

.ball

DOM对象的URL

---

您可能还需要在所有ajax请求完成后执行代码，因此使用

$。when

是最简单的方法。正是因为这个原因，我们保存了所有的承诺

类似这样的内容，以简化代码

function successHandler(url, ball) {
  return function(ret) {
     alert('file: ' + url + 'EXXXXXXISTS!!!!!');
     ball.css('color','red')
  }
}

var balls = $('.ball'), requests = []


balls.each(function(index, ball) {
  var url = ...
  requests.push($.ajax({ url : url , success : successHandler(url, ball) })
})

$.when.apply($, requests).done(function() {
  alert('all balls are checked')
}) 

或使用ES6：

const success = (url,ball)=>(ret)=>ball.css('color','red')

const balls = $('.balls')
    , reqs = balls.map( (b, i) => {
        const url = ...
        return $.ajax({url, success:success(url,ball)})
    })

$.when.apply($, reqs).done( (resps) => alert('all done'))

一点解释：您在回调中盲目地使用

this

，不知道它将在哪个上下文中执行。为了解决这个问题并将您的URL放入回调中，我们正在创建一个返回函数的函数，因此它将在上下文中具有当前

.ball

DOM对象的URL

---

您可能还需要在所有ajax请求完成后执行代码，因此使用

$。when

是最简单的方法。正是因为这个原因，我们保存了所有的承诺

如果您不关心每个ajax调用的执行顺序，只想知道它们何时完成以及数组是否已完全填充，那么您可以通过修复对

this

的引用并添加一个回调函数来实现这一点，该函数在所有项完成时都会被调用：

// this function called when the ajax calls for all balls have finished
// at this point, blogA and blog_count will be populated
function ballsDone() {
    // put your code here
}

var balls = $(".ball");
var cnt = balls.length;
balls.each(function(i){

    var url;
    var self = $(this);

    var c_day = self.data('day');
    var c_mon = self.data('mon');
    var c_year = self.data('year');

    url = c_year + "/" + c_mon + "/" + c_day + ".html";

    $.ajax({

        url: url, 
        error: function()
        {
              alert('file: ' + url + '   does not exist');
              if (--cnt <= 0) {
                  ballsDone();
              }
        },
        success: function()
        {
            blogA[ blog_count ] = url;
            blog_count++;
            self.css("color", "red" );           
            if (--cnt <= 0) {
                ballsDone();
            }
        }
    });
 });

//当所有球的ajax调用完成时调用此函数
//此时，将填充blogA和blog_计数
函数ballsDone（）{
//把你的代码放在这里
}
var balls=$（“.ball”）；
var cnt=球的长度；
每个球（功能（i）{
var-url；
var self=$（这是）；
var c_day=自身数据（“日”）；
var c_mon=self.data（'mon'）；
var c_year=自身数据（“年度”）；
url=c_year+“/”+c_mon+“/”+c_day+“.html”；
$.ajax({
url:url，
错误：函数（）
{
警报（'文件：'+url+'不存在'）；
如果（--cnt如果您不关心每个ajax调用的执行顺序，只想知道它们何时全部完成并且数组已完全填充，那么您可以通过修复对
this
的引用并添加一个回调函数来实现这一点，该回调函数在所有项目完成时调用：

// this function called when the ajax calls for all balls have finished
// at this point, blogA and blog_count will be populated
function ballsDone() {
    // put your code here
}

var balls = $(".ball");
var cnt = balls.length;
balls.each(function(i){

    var url;
    var self = $(this);

    var c_day = self.data('day');
    var c_mon = self.data('mon');
    var c_year = self.data('year');

    url = c_year + "/" + c_mon + "/" + c_day + ".html";

    $.ajax({

        url: url, 
        error: function()
        {
              alert('file: ' + url + '   does not exist');
              if (--cnt <= 0) {
                  ballsDone();
              }
        },
        success: function()
        {
            blogA[ blog_count ] = url;
            blog_count++;
            self.css("color", "red" );           
            if (--cnt <= 0) {
                ballsDone();
            }
        }
    });
 });

//当所有球的ajax调用完成时调用此函数
//此时，将填充blogA和blog_计数
函数ballsDone（）{
//把你的代码放在这里
}
var balls=$（“.ball”）；
var cnt=球的长度；
每个球（功能（i）{
var-url；
var self=$（这是）；
var c_day=自身数据（“日”）；
var c_mon=self.data（'mon'）；
var c_year=自身数据（“年度”）；
url=c_year+“/”+c_mon+“/”+c_day+“.html”；
$.ajax({
url:url，
错误：函数（）
{
警报（'文件：'+url+'不存在'）；
如果（--cnt修复了什么？错误是什么？“.ajax在中的使用都会导致很多问题”-不要盲目地遵循建议，但要尝试了解这些建议的原因。毫不奇怪，有很多愚蠢的人在互联网上给出愚蠢的建议，你很可能已经找到了其中的一些建议。
$（此）
反复使用是不好的做法。请将其储存在variable@elclanrs：很抱歉。问题是我得到了非常奇怪的结果（与异步有关？）。如果我在ajax之外警告url，它会正确地遍历元素。如果我在ajax中警告url，它会吐出属于类的最后一个元素的url。坦率地说，现在这没有任何意义。
varing
url
将其绑定到函数上下文，因此
error
和
success
functions（也是在此函数中创建的）将指向它自己的
url
。您确定已经在这里展示了整个过程吗？修复什么？错误是什么？“在中使用.ajax。每个都会导致很多问题”---不要盲目地听从别人的建议，但要试着弄清楚为什么会这样做。毫不奇怪，有很多愚蠢的人在互联网上给出愚蠢的建议，你很可能已经找到了其中的一些建议。
$（此）
反复使用是不好的做法。请将其储存在variable@elclanrs：很抱歉。问题是我得到了非常奇怪的结果（与异步有关？）。如果我在ajax之外警告url，它会正确地遍历元素。如果我在ajax中警告url，它会吐出属于类的最后一个元素的url。坦率地说，现在这没有任何意义。
varing
url

将其绑定到函数上下文，因此

error

和

success

functions（也在此函数中创建）将指向它自己的

url

。你确定你已经在这里展示了整个故事吗？确实，非常好的方法。如果你想按顺序处理它们，你可以通过在done回调中迭代arguments对象来实现。确实，非常好的方法。如果你想按顺序处理它们，你可以通过在对象。感谢您的回复。我是否应该只在ballsDone（）函数中访问blogA？@Andy-是的，您是对的。

blogA

和

blog\u count

在调用

ballsDone（）

之前不会完全填充。谢谢