增量计数器在循环外不可用

时间:2010-12-21 18:12:50

标签: javascript jquery

我使用jQuery的$ .each()循环遍历json返回值,并将返回的类添加到相应的<div>;但是,计数器似乎无法在立即循环之外进行进一步处理。我尝试过使用return&amp;外部函数调用无济于事。当我在迭代中警告()计数器时,它会正确显示;并且所有类都正确更新。任何见解都会非常感激。

代码:

var c = 0;
function refreshIt(){
  var page = $(".navselected").attr('id');
  var ids = $('.content div[id]').map(function(){
    return this.id;
  }).get();

  $.ajax({
    type:'POST',
    url:page + 'functions.php',
    data:{'idList[]':ids},
    dataType:'json',
    success:function(data){
      $.each(data,function(element,load){
        $("#" + element).slideUp(400,function(){
          $("#" + element).removeClass("critical ok");
          $("#" + element).addClass(load.status).html(load.number).slideDown(400);
          if(load.status == 'ok'){
            c++;
          }
          else{
            c++;
          }
        });
      });

      $('.infostatus').addClass('infook').html("There are " + c  + " errors on this page.     Kudos!");
    }
  });
}

3 个答案:

答案 0 :(得分:4)

当你进行ajax调用时,浏览器发送请求并将函数附加到它,然后在等待响应时继续执行脚本的其余部分。这意味着在ajax返回之前几乎肯定会执行最后一行代码。将该行放在ajax成功函数中,就在每个函数之后:

$.ajax({
  type:'POST',
  url:page + 'functions.php',
  data:{'idList[]':ids},
  dataType:'json',
  success:function(data){
    $.each(data,function(element,load){
    $("#" + element).slideUp(400,function(){
    $("#" + element).removeClass("critical ok");
    $("#" + element).addClass(load.status).html(load.number).slideDown(400);
    if(load.status == 'ok'){
      c++;
    }
    else{
      c++;
    }
  });

  $('.infostatus').addClass('infook')
  .html("There are " + c  + " errors on this page.     Kudos!");

});

答案 1 :(得分:1)

此代码似乎有{括号而不是}括号,因此很难确定 - 但我猜测问题是您正在调用.ajax()和然后通过调用.html()立即填写HTML。

.ajax()方法仅触发请求;它不会等到收到回复。因此,在响应回来并处理数据之前,您的.html()调用正在执行

要解决此问题,只需在调用success后立即将最后两行代码移至.each()函数。

答案 2 :(得分:0)

的目的是什么?
if(load.status == 'ok'){
  c++;
}
else{
  c++;
}

这是您的代码,简化:

var c = 0;
function refreshIt() {
    var page, ids;
    page = $(".navselected").attr('id');
    ids = $('.content div[id]').map(function() {
        return this.id;
    }).get();

    $.ajax({
        type:'POST',
        url:page + 'functions.php',
        data:{'idList[]':ids},
        dataType:'json',
        success:function(data){
            $.each(data,function(element,load){
                var elem = $("#" + element);
                elem.slideUp(400,function() {
                    elem.removeClass("critical ok");
                    elem.addClass(load.status).html(load.number).slideDown(400);
                    c++;
                });
            });
            $('.infostatus').addClass('infook')
                .html("There are " + c  + " errors on this page.     Kudos!");
        }
    });
}