Question

我有一个页面，上面有很多相同类的元素（~1,500），当我执行时

$(".pickrow").addClass("vis");

页面需要一两秒才能反映更改。因此，用户不会认为页面被卡住了，我想使用以下命令弹出一条小信息：

$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").hide();

但msgDiv从未表现出来。如果我删除了$("#msgDiv").hide(); msgDiv与添加的类的应用程序同时出现（在添加该类所花费的1或2秒之后）。

似乎jQuery函数汇总并在没有任何屏幕更新的情况下一起运行，直到它们全部完成。

如何在$(".pickrow").addClass("vis");正在处理时显示msgDiv？

这是 Demo

Answer 1

您可能希望将隐藏延迟几秒钟。

$("#msgDiv").show();
$(".pickrow").addClass("vis");
setTimeout(function(){ $("#msgDiv").hide(); },2000);

或者使用jQuery的动画队列进行计时：

$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").delay(2000).hide(1); //must make it at least 1 ms to go into the queue

Answer 2

你也可以采用这种方法

正在使用 DEMO

$(document).on("click",".btn",function(){
    $(".msg").show("fast",function(){
        $(".pickrow").addClass("vis");
   var interval = setInterval(function(){

        var picLength = $(".pickrow").length;
        var visLength = $(".vis").length;

        if(picLength == visLength){
            clearInterval(interval);
            $(".msg").hide();
        }

    },500);
});

}）;

Answer 3

我认为如果您简化代码，您会发现它的响应速度更快，可能不需要加载消息。在代码中，检查if语句中的每个元素。您可以检查一个值，然后相应地更新所有值，而不是这样做。

这是一个演示：http://jsfiddle.net/jme11/3A4qU/

我对您的HTML进行了一次更改，将输入按钮的初始值设置为＆＃34;显示详细信息＆＃34;。然后在下面的代码中，您可以检查该值是否为Show Details并删除隐藏.pickrow的类，并将该按钮的值更新为＆＃34; Hide Details＆＃34; （无论如何，这对用户来说是更好的反馈）。同样，如果按钮值不是＆＃34;显示详细信息＆＃34;，则可以将.hid类添加到pickrow中。这也将标准化所有类，无论是否单独隐藏或显示它们。

$('#showhide').on('click', function(){
    if ($(this).val() === 'Show Details') {
        $('.pickrow').removeClass('hid');
        $(this).val('Hide Details');
    } else {
        $('.pickrow').addClass('hid');
        $(this).val('Show Details');
    }    
});

jQuery函数在后台运行？

3 个答案: