Дождитесь завершения всех функций async в jQuery

Question

Я фильтрую таблицу с помощью jQuery, и все хорошо. Этот код прекрасно работает:

$("*[id$='EquipmentTypeDropDownList']").change(filterTable); 
$("*[id$='StateDropDownList']").change(filterTable); 

function filterTable() { 
    var $equipmentDropDown = $("*[id$='EquipmentTypeDropDownList']"); 
    var $stateDropDown = $("*[id$='StateDropDownList']"); 

    var equipmentFilter = $equipmentDropDown.val(); 
    var stateFilter = $stateDropDown.val(); 

    $("tr.dataRow").each(function() { 
    var show = true; 

    var equimpent = $(this).find("td.equipment").text(); 
    var state = $(this).find("td.readyState").text(); 

    if (equipmentFilter != "Any" && equipmentFilter != equimpent) show = false; 
    if (stateFilter != "Any" && stateFilter != state) show = false; 

    if (show) { 
     $(this).fadeIn(); 
    } else { 
     $(this).fadeOut(); 
    } 
    }); 

    $("table").promise().done(colorGridRows); 
} 

function colorGridRows() { 
    //for table row 
    $("tr:visible:even").css("background-color", "#DED7D1"); 
    $("tr:visible:odd").css("background-color", "#EEEAE7"); 
} 

colorGridRows функция меняет цвет фона четных/нечетных строк для удобства чтения Теперь, было бы хорошо, если я могу заменить показать/скрыть звонки с FadeIn/Затухание, но я не потому, что окраска может (он работает до того, как эффект пользовательского интерфейса завершен.Если это был только один параметр функции - я бы просто создал функцию для завершения и делал с ней. Но в моей таблице много строк и циклов, проходящих через каждый. ВСЕ, чтобы скомпилировать?

EDITED: образец кода обновлен, показывая, как я пытаюсь использовать promise(), но он не работает. Он срабатывает, но я не получаю нечетную/четкую окраску.

Answer 1

Используйте объект обещания для анимации.

 $("*[id$='StateDropDownList']").change(function() { 
      var filtervar = $(this).val(); 
      $('tr td.readyState').each(function() { 
       if (filtervar == "Any" || $(this).text() == filtervar) { 
        $(this).parent().fadeIn(); 
       } else { 
        $(this).parent().fadeOut(); 
       } 
      }).parent().promise().done(colorGridRows); 

      //colorGridRows(); 
     });