функция выполняется слишком рано

Question

я застрял со следующей проблемой:

Я хочу функцию, чтобы создать DIV тег для хранения изображений и второй функцией для создания тега IMG и вставить их в DIVs, созданный ранее. Хорошо работает с «предупреждающими сообщениями». Однако без предупреждений вторая функция запускается до первой законченной загрузки тегов 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

Поскольку, как Кос отметил, вы не можете полагаться на звонки для завершения того, вы будете иметь, чтобы получить немного сложнее, чтобы гарантировать, что все ваши Аякса вызовы были завершены , Попробуйте что-то вроде этого:

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() вызова.

Answer 2

Вы можете установить асинхронной ложь в $ .ajax так исполнение блоков. Или вы можете проверить i в обратном вызове с успешным выполнением, а если его 5, призовите приложение().

Answer 3

Я не могу точно сказать, что вы спрашиваете, но похоже, что вам нужно переместить звонок appendix() в обратный вызов успеха. Помните, что вызов success не может быть выполнен до вызова appendix в представленном вами коде.

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

Конечно, вы можете не захотеть этого 5 раз в вашем цикле for. Вот один из способов сделать это позвонить после того, как происходит последний успех, возможно, не самый чистый:

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 4

а) Создайте переменную для подсчета, сколько раз success функция обратного вызова выполняется и запустить appendix только тогда, когда это число равняется номер ваших вызовов ajax,

b) Зарегистрируйте ответный вызов $.ajaxComplete.

Answer 5

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

Answer 6

элегантный способ сделать это состоит в использовании $.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)); 
    }); 
}