jQuery 在缓慢运行期间显示 "loading"

Question

我试图在 jQuery 缓慢操作期间显示一个小的加载图像，但无法正确显示。这是一个包含数千行的大表。当我选中“mostrarArticulosDeReferencia”复选框时，它会从这些行中删除“隐藏”类。此操作需要几秒钟，我想提供一些反馈。“loading”是一个带有小gif动画的div

这是完整的代码

jQuery(document).ready(function() {
jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
        jQuery("#loading").show(); //not showing
        jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation
        jQuery("#loading").hide();
    } else {
        jQuery("#loading").show();  //not showing
        jQuery("#listadoArticulos tr.r").addClass("hidden");  //slow operation
        jQuery("#loading").hide();
    }
});
jQuery("#loading").hide();
});

看起来 jquery 正在“优化”这 3 行

        jQuery("#loading").show(); //not showing
        jQuery("#listadoArticulos tr.r").removeClass("hidden");
        jQuery("#loading").hide();

并且从不显示加载 div。有什么想法吗？

奖励:有更快的方法来执行此显示/隐藏操作吗？发现切换速度慢得多。

更新:我试过这个

    jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
            jQuery("#loading").show(); //not showing
            jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation
            setTimeout("jQuery('#loading').hide()", 1000);
    } else {
            jQuery("#loading").show();  //not showing
            jQuery("#listadoArticulos tr.r").addClass("hidden");  //slow operation
            setTimeout("jQuery('#loading').hide()", 1000);
    }
});

这就是我得到的

1. 点击复选框
2. 2/3 秒内没有任何反应(处理)
3. 页面已更新
4. 加载 div 瞬间出现

更新2:我有一个可行的解决方案。但为什么我必须使用 setTimeout 才能使其工作超出我的范围......

    jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
            jQuery("#loading").show();
            setTimeout("jQuery('#listadoArticulos tr.r').removeClass('hidden');", 1);
            setTimeout("jQuery('#loading').hide()", 1);
    } else {
            jQuery("#loading").show();
            setTimeout("jQuery('#listadoArticulos tr.r').addClass('hidden');", 1);
            setTimeout("jQuery('#loading').hide()", 1);
    }
});

更新3:刚刚为这个特殊情况找到了更好的解决方案。

//mostrar u ocultar articulos de referencia
$("#mostrarArticulosDeReferencia").click(function(event){
    if( $("#mostrarArticulosDeReferencia").attr("checked") )
        $("tr.r").css({'display':'table-row'});
    else
        $("tr.r").css({'display':'none'});
});

使用 .css({'display':'none'}) 比 hide() 快得多，因此不需要加载动画...
这篇文章让我明白了:show/hide performance .

Answer 1

显然，您正在触发一个异步请求(是的，异步，换句话说，它不与代码同步运行!)运行过程”。异步请求回调函数最后需要调用$('#loading').hide()。

这是一个很好的例子:

$('#loading').show();
$.getJSON('someURL', function(data) {
    // Do slow processing.
});
$('#loading').hide();

这显然行不通。它将显示、触发异步请求，然后立即隐藏。您需要将代码重写为:

$('#loading').show();
$.getJSON('someURL', function(data) {
    // Do slow processing.
    $('#loading').hide();
});