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效果完成之前运行。如果它只是一个函数参数 - 我只想创建函数完成并完成它。但我的表有很多行和循环遍历每个。我如何等待所有人竞争？

已编辑：代码示例已更新，显示我如何尝试使用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();
        });

等待所有异步函数在jQuery中完成

1 个答案: