javascript - jQuery 函数仅在调试器模式下工作

Question

我尝试在过滤表中的行(有 5000 行)时显示和隐藏加载器/旋转器 GIF。

$('.dropdown-filter-menu-item.select-all').click(function () {
     document.getElementsByClassName('modal')[0].style.display='block';
    // filter function
    **code goes here**
   document.getElementsByClassName('modal')[0].style.display='none';
})

这里，“dropdown-filter-menu-item”是复选框过滤器的类名，modal是使用的“loader”的类名。 当我将调试器放置在显示或隐藏行中时，它工作正常。没有调试器，它无法工作。 我认为元素的样式只有在函数结束后才会改变。你能帮我解决这个问题吗？提前致谢。

Answer 1

I think the styles of element gets changed only after the function ends

猜得不错，这正是正在发生的事情，因为整个函数是同步的。

有一个很好的技巧可以使用，它可以让你的加载图像显示出来，然后解决耗时的过滤功能。超时后执行过滤:

$('.dropdown-filter-menu-item.select-all').click(function () {
    document.getElementsByClassName('modal')[0].style.display='block';
    setTimeout(filter); // defaults to 0ms
})

function filter() {
    **code goes here**
   document.getElementsByClassName('modal')[0].style.display='none';
}

setTimeout 允许您的函数在下一个生命周期中运行，从而允许首先显示加载图像。