Question

我有一个功能：

$(".left_filter_menu").on("click", ".platforms", function() {
  document.getElementById("loaderContainer").style.display = "block";
  console.log(document.getElementById("loaderContainer"));

  areAllPlatformSwitchesChecked();

  document.getElementById("loaderContainer").style.display = "none";
  console.log(document.getElementById("loaderContainer"));
});

这应该显示我的加载器div，执行功能areAllPlatformSwitchesChecked，然后隐藏加载器div，但它根本不显示加载器。我添加了console.log来了解为什么，输出为：

(index):731 <div id="loaderContainer" style="display: none;">…</div>
(index):734 <div id="loaderContainer" style="display: none;">…</div>

当我摆脱hide部分时，它会显示加载程序div。有任何想法吗？

Answer 1

我不知道这实际上是您的问题，但通常是这样，因此值得尝试。

在我看来，在UI有机会更新之前，将所有元素设置为可见，执行同步方法，然后将元素设置回隐藏。您可以通过给浏览器一个机会来强制更新UI，只需在阻塞代码周围加上setTimeout()，就像这样...

$(".left_filter_menu").on("click", ".platforms", function() {

    document.getElementById("loaderContainer").style.display = "block";

    setTimeout(function() {
        areAllPlatformSwitchesChecked();
        document.getElementById("loaderContainer").style.display = "none";
    }, 1);
}

尝试一下。老实说，这是在黑暗中拍摄的镜头，但在您遇到的情况下，我已经面对了很多次，值得一掷。让我知道它是否有效。如果没有，我将其删除。

样式显示没有触发功能

1 个答案: