Question

我遇到了以下问题：

我想要一个函数来创建DIV标签来保存图像，第二个函数来创建IMG标签并将它们插入之前创建的DIV中。适用于“警报消息”。但是没有警报，第二个函数在第一个完成加载DIV标记之前运行。

我认为我需要某种回调函数，但我不知道如何做到这一点。

以下是代码：

function imageLoader ()
     {         
     for (i=1;i<=5;i++)
             {
             checkPath = 'images/pic'i+'.png';
             $.ajax({
                     url: checkPath,
                     type:'HEAD',
                     success:
                             function() {
                                     //create DIVs t hold images
                                     $('.tools').append("<div class='tooling'></div>");
                                     }
                     });
             }
     // after creating DIVs, call function to create <img> tags
     appendix();  
     }

感谢您的帮助。

此致

频繁

Answer 1

我无法确切地说出你在问什么，但看起来你可能需要将appendix()电话转移到成功回调中。请注意，在您提供的代码中success调用之前，可能无法执行appendix回调。

function() {
  //create DIVs t hold images
  $('.tools').append("<div class='tooling'></div>");
  appendix();
}

当然，您可能不希望在for循环中调用5次。这是在最后一次成功发生后调用它的一种方法，也许不是最干净的：

for (i=1;i<=5;i++)
{
  if(i == 5) {
    var succ = function() {
        //create DIVs t hold images
        $('.tools').append("<div class='tooling'></div>");
        appendix();
      };
  } else {
    var succ = function() {
        //create DIVs t hold images
        $('.tools').append("<div class='tooling'></div>");
      };
  }
  checkPath = 'images/pic'i+'.png';
  $.ajax({
    url: checkPath,
    type:'HEAD',
    success: succ
    });
}

Answer 2

因为，正如Kos指出的那样，你不能依赖于按顺序完成的调用，你必须要有点棘手才能确保所有的ajax调用都已完成。尝试这样的事情：

function imageLoader() {
    var ajaxCounter = 0;
    for (i = 1; i <= 5; i++) {
        checkPath = 'images/pic'
        i + '.png';
        $.ajax({
            url: checkPath,
            type: 'HEAD',
            success: function() {
                //create DIVs t hold images
                $('.tools').append("<div class='tooling'></div>");
                ajaxCounter++;
                if (ajaxCounter == 5) {
                    // after creating DIVs, call function to create <img> tags
                    appendix();
                }
            }
        });
    }
}

在执行appendix()电话之前，应检查以确保您拥有所需数量的ajax成功。

Answer 3

a）创建一个变量来计算success函数回调执行的次数，并且仅当此计数等于您的ajax调用次数时才运行appendix，

b）注册$.ajaxComplete回调。

Answer 4

执行此操作的优雅方法是使用$.when：

function imageLoader(
    $.when.apply($, $.map(new Array(5), function (e, i) {
        var checkPath = 'images/pic' + (i + 1) +'.png',
            d = $.Deferred();

        $.ajax({
            url: checkPath,
            type:'HEAD',
            success: function () {
                d.resolve($('<div class="tooling">')
                              .append($('<img>').attr(src, checkPath)));
            },
            error: function () { d.resolve(null); }
        });

        return d.promise();
    })
    .then(function () {
        $('.tools').append(Array.prototype.slice(arguments));
    });
}

Answer 5

您可以在$ .ajax中将async设置为false，以便阻止执行。或者，您可以在成功回调中检查 i ，如果是5，则调用附录（）。

Answer 6

function imageLoader ()
 {         
 for (i=1;i<=5;i++)
         {
         checkPath = 'images/pic'i+'.png';
         $.ajax({
                 url: checkPath,
                 type:'HEAD',
                 success:
                         function() {
                                 //create DIVs t hold images
                                 $('.tools').append("<div class='tooling'></div>", 
                                     function(){
                                         appendix();  
                                     });
                                 }
                 });
         }     
 }

函数执行得太快了

6 个答案: