javascript - 在移动到下一行之前，如何强制在 javascript 中执行一行？

Question

我有几个过滤器可以显示或隐藏表格中的表格行，然后检查是否没有行可见，然后向表格添加一条消息，说明不存在任何行。

这就是我尝试做的方式，但惨遭失败，也许我不知道 JS 执行行的方式，也许总是异步的？

HTML

<input ID="cbFreshFruits" Checked="true" onclick="ToggleFruits(this)" />

脚本

function ToggleFruits(elm) {
    $target = $('#fruitTable tr[data-status="' + elm.id + '"]').filter(function () {
        var crates = $("#crateTable tr .selected").parent().map(function () {
            return $(this).data("crateID");
        }).get();
        return crates.indexOf($(this).data("crateID")) >= 0;
    });

    if (elm.checked) {
        $target.show("down");
    }
    else {
        $('#fruitTable tr[data-status="' + elm.id + '"]').hide("up");
    }

    CheckFruitExists();
}


function CheckFruitExists() {
    $("#NoFilteredFruits").hide();
    $("#fruitTable").show();

    if ($("#fruitTable tr:visible").length < 1) {
        $("#NoFilteredFruits").show();
        $("#fruitTable").hide();
    }
}

问题

在开发者工具中勾选后，JS会执行这条语句

if ($("#fruitTable tr:visible").length < 1)

在此之前，

 else {
            $('#fruitTable tr[data-status="' + elm.id + '"]').hide("up");
        }

我的意思是它会执行它，但不会进行更改，例如它在执行 if 语句之前不隐藏任何行。

请注意，我在不同的地方使用 CheckFruitExists，所以我想把它分开。

Answer 1

JavaScript 和 DOM 的操作是单线程的。浏览器通过将项目放入队列中并一个接一个地执行它们来工作。当您更新 DOM 时，实际发生的是将更新它的请求放在队列的末尾，因此它会在您的 JavaScript 运行完成后发生。在这种情况下，您需要做的是强制您的第二个函数转到此队列的末尾，以便它可以在 DOM 操作发生后运行。您可以通过在零超时中包装对函数的调用来做到这一点:

window.setTimeout(CheckFruitExists, 0);

这将导致它被添加到执行队列的末尾，现在应该在 DOM 更新发生后运行。

更新:

根据我的评论，jQuery visible selector考虑动画周期中的元素:

During animations that hide an element, the element is considered visible until the end of the animation. During animations to show an element, the element is considered visible at the start at the animation.

这意味着当您的 CheckFruitExists 函数运行时，该元素仍将处于动画状态并且将被视为可见，无论它是隐藏还是显示。尝试删除您的动画以查看是否可以解决问题(您可能仍需要使用上述 setTimeout 修复)。如果是，你仍然希望使用动画，则需要在hide和show的动画完成回调函数中调用CheckFruitExists相反。