Как дождаться завершения функции jQuery, прежде чем двигаться дальше?

Question

Так что сейчас у меня есть код

$('[name=dept]').live('change',function() {
$('#course').load('getCla.php?dept='+$(this).val());
$('select.speedC').selectmenu({style:'dropdown',maxHeight: 250}); 
});

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

Есть ли способ заставить 3-ю строку дождаться окончания распространения списка? (По мере заполнения списка форматирует список).

Answer 1

Используйте параметр обратного вызова .load(), например:

$('#course').load('getCla.php?dept='+$(this).val(), function() { 
  $('select.speedC').selectmenu({style:'dropdown',maxHeight: 250}); 
});

Обратный вызов запускается, когда ответ возвращается, а элемент #course получает новое содержимое.Он также получает возвращенный html с сервера в качестве первого аргумента, если он вам нужен по какой-либо причине.

Кроме того, поскольку ваш начальный селектор очень дорогой, я настоятельно рекомендую .delegate() здесь, вот так:

$('body').delegate('[name=dept]', 'change', function() {
  $('#course').load('getCla.php?dept='+$(this).val(), function() { 
    $('select.speedC').selectmenu({style:'dropdown',maxHeight: 250}); 
  });
});

Answer 2

используйте функцию обратного вызова в jQuery load ()

Как это:

$('[name=dept]').live('change',function() {
  $('#course').load('getCla.php?dept='+$(this).val(), function (responseText, textStatus, xhr) {
    $('select.speedC').selectmenu({style:'dropdown',maxHeight: 250}); 
  });
});