jQuery ждать завершения выполнения кода

Question

Я написал несколько javascript, используя jQuery, чтобы заменить любые избранные списки альтернативой div и ul, чтобы он дал мне еще несколько элементов управления стилями и сделал выпадающие списки похожими на один и тот же кросс-браузер , Ниже код работает на 99% для меня, но у меня есть одна проблема. В нижней части кода мне пришлось использовать .delay(), чтобы сообщить код, чтобы дождаться цикла .each() выше, чтобы закончить выполнение его действия. Проблема заключается в том, что по крайней мере одна секунда остается до тех пор, пока не произойдет замена, за исключением вспышки старых блоков выбора. Также я могу предвидеть еще одну проблему: если для завершения цикла each() требуется больше одной секунды ...

Как я могу получить код внизу, чтобы работать только после запуска и завершения каждого цикла , Также я приветствую любую оптимизацию остальной части кода.

EDIT: Некоторые HTML были удалены из кода, так что я pastebinned его: http://pastebin.com/4HFLjHE1

// Check when ready 
$(function() { 

    // Find dropdowns 
    $("select.dropdownreplace").each(function() {replaceDropDown(this);}); 
    // If document clicked anywhere hide drop downs 
    $(document).click(function(event){ 
     $("div.dropdownreplace ul").hide(); 
    }); 

}); 

function replaceDropDown(that) { 
    // Create HTML for new drop down 
    // hidden field 
    var hiddeninput = $(''); 
    // div 
    var dropdowndiv = $(''+$(":selected", that).text()+'
          
  
'); 

    // loop through values and make li's 
    $("option", that).each(function() { 
     $("ul", dropdowndiv).append('
'+$(this).val()+''+$(this).text()+'
'); 
     // set click handler for this drop down 
     $(dropdowndiv).click(function() { 
      $("ul", this).show(); 
      return false; 
     }); 
     // set click handler for link items 
     $("a", dropdowndiv).click(function() { 
      // Get name of hidden input 
      var nameofdropdown = $(this).parent().parent().parent().attr('id'); 
      var nameofinput = nameofdropdown.replace("dropdownreplacement_", ""); 
      // set hidden input value to whats been clicked 
      $("[name='"+nameofinput+"']").val($(this).parent().find("span").text()); 
      // set div 
      $("div#"+nameofdropdown+" > span").text($(this).text()); 
      $("div#"+nameofdropdown+" ul").hide(); 
      return false; 
     }); 
    }); 

    // Remove drop down then add in replacement html 
    $(that).delay(1000).after(hiddeninput); 
    $(that).delay(1100).after(dropdowndiv); 
    $(that).delay(1200).remove(); 
} 

Thnaks

Скотт

Answer 1

Внутри вашей функции, сравнить индекс JQuery передает вам, с общим количеством элементов, которые имеют ,

Я не знаю вашего html, но я считаю, что вы можете это сделать.

Измените свою функцию так, чтобы она получила параметр index, который отправляет jquery.

$("option", that).each(function(index) { 

Затем, в конце этой функции сравните длину с индексом, если они одинаковы, то вы сделали

if ($('option', that).length == (index +1)) { 
    $(that).after(hiddeninput); 
    $(that).after(dropdowndiv); 
    $(that).remove(); 
} 

Из моих тестов, это должно быть то, что вам нужно , Не знаю, есть ли более «стандартный» способ сделать это.

Надеется, что это помогает

Answer 2

Что вам нужно сделать, это создать callback function л , В вашем друге(), после начальной функции вы можете указать, что нужно сделать еще некоторые вещи, когда он закончил:

$("option", that).each(function() { 

    <...code...> 

}, function() { 
     <...code...> //this gets performed after the previous function is complete 
});