等待所有异步功能在jQuery中完成

Question

I'm filtering table using jQuery and all is well. This code works nicely:

$("*[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 function changes background color of even/odd rows for readability Now, It would be nice if I can replace show/hide calls with fadeIn/fadeOut but I can't because coloring doesn't work (it runs before UI effect completed. If it was just one function parameter - I would just create function for completion and be done with it. But my table has many rows and loop runs through each. How do I wait for ALL to compelete?

EDITED: Code sample updated showing how I try to use promise() but it doesn't work. It fires but I don't get odd/even coloring.

Answer 1

Use the promise object for animations.

        $("*[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();
        });