jQuery显示和隐藏不按预期工作

Question

请查看示例http://jsfiddle.net/FuFHe/7/

当我点击按钮时，显示数据加载器div应显示并隐藏几秒钟后。在控制台日志中，您可以清楚地看到qloader div的display属性设置为block而none，但没有任何反应，qloader div永远不会显示。

有什么问题？

Answer 1

为什么使用sleep使用setTimeout

setTimeout(function(){
        $("#loading").hide();},3000);

Live Demo

Answer 2

您需要在sleep()功能完成后立即调用show()函数。 查看小提琴。它现在应该工作。的 JSFIDDLE link

但正如@rahul所提到的，你应该使用setTimeout()函数。

$("#loading").show(function(){
    sleep(3000);
    $("#loading").hide();
});

Answer 3

这不是一个好的睡眠方式。它会占用CPU，你甚至不能依赖它在快速机器上花费整整3秒钟。而是use setTimeout()：

setTimeout(function(){
    $("#loading").hide();     
    console.log("qloader display = " + $("#loading").css("display")); 
}, 3000);

这将允许浏览器和您的网站在等待时间通过时继续运行。

Answer 4

尝试使用setTimeout

$('.btn').on( "click" , function( event ){
 $("#loading").show(); 
    setTimeout(function(){
       $("#loading").hide();
    }, 3000);

});  

jsFiddle