在执行其他函数之前，先在JS中显示模式

Question

我有一个问题，想知道我是不是做错了什么。

我有一个接近200div的页面。

所以当我运行这个函数时，基本上它首先隐藏所有的200个div，然后显示特定的div。这已经在发生了。但由于它首先隐藏了所有200个div，然后根据运算符逻辑显示10-15个div，因此需要5-7秒。

我希望在函数启动时立即显示弹出模式，然后显示div循环以隐藏它们。然后是显示需要显示的div的函数，最后隐藏弹出模式。

但当我运行函数时，模式几乎不会出现，因为它等待整个循环完成。

我正在使用以下内容：

function show_by_price()
{
    $('#loading').modal('show');

    for(j=1; j<= $("#total_div_count").val(); j++)
    {
       $("#div_id_"+j).hide()
    }

    $('#loading').modal('hide');
}

Answer 1

我不能理解模态的问题，但我有另一个问题-

为什么不使用两个div，一个主容器管理所有的200个元素，另一个"help“容器。所以当你需要隐藏时-你隐藏主容器而不是一个接一个地隐藏200个元素，然后移动所需的10-15个元素，这些元素应该显示在第二个可见的帮助容器中？

这在性能方面应该要好得多。

Answer 2

不要用JavaScript来做这些事情，按照Samuil的建议，有一种更有效的方法来显示/隐藏元素。话虽如此，您可能会对基于bootstrap modal events做一些事情感兴趣。

$('#loading').on('shown.bs.modal',function() {
   //execute code in here after the modal is fully visible
}).modal('show');