javascript - 等待所有异步函数在 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/fadeOut 替换显示/隐藏调用就好了，但我不能，因为着色不起作用(它在 UI 效果完成之前运行。如果它只是一个函数参数 - 我会创建函数完成并完成它。但是我的表有很多行并且循环遍历每一行。我如何等待 ALL 完成？

已编辑:代码示例已更新，展示了我如何尝试使用 promise() 但它不起作用。它会触发，但我没有得到奇数/偶数颜色。

Answer 1

将 promise 对象用于动画。

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