Question

我正在显示并隐藏包含加载/等待gif图像的div。点击按钮，我在点击功能结束时调用$("#div").show()和.hide()。但图像一般不显示。当我在.show()行旁边放置断点时，它会显示图像。

我也试过了.css("display","")，但它没有用。

请以任何其他方式提出建议，或告诉我可能出现的问题。

感谢。

我的代码如下所示

$("#button").click(function(){

   $("#div").show(); // showing image so that user will know that a process is going on.

   //other working code

   $("#div").hide();   // hiding will indicate process completion
});

Answer 1

您在同一个函数调用中调用show和hide而没有动画。因为这是同步发生的，所以2个函数调用将在同一个线程中进行，因为JavaScript是单线程的。您根本不会注意到任何更改，因为它在浏览器甚至更新显示之前显示和隐藏在同一个线程上。如果有某种异步调用你会看到它，但你似乎没有。

您可以通过将所有工作代码放在setTimeout中的初始显示之后伪造它。

$("#div").show();
setTimeout(function(){
    ...other working code
    $("#div").hide();
}, 100);

这会将处理延迟100ms，但是一旦处理开始，如果工作代码部分需要一秒钟才能完成动画gif实际上不会生成动画，因为动画的显示在JavaScript执行时无法运行（由于浏览器的单线程行为）。

Answer 2

Javascript是单线程的，并且共享相同的线程用于UI呈现和脚本执行。由于浏览器进行优化的方式，您没有看到show（）和hide（）效果。

您可以使用JQuery promise机制来解决您的问题。示例here

而不是这样做

1）显示DIV

2）执行一些代码

3）隐藏DIV

你会这样做

1）显示div

2）'show'完成时

           2.1) execute your code, 
           2.2) hide the DIV

我创建了一个JSbin工作示例here

Answer 3

浏览器具有非常花哨的工作风格，当脚本正在执行时，会在脚本完成后延迟所有界面绘制。

因此，在您的代码中，浏览器确实会显示div（您可以获得正确的offsetWidth和offsetHeight），但您无法看到它（因为绘图已延迟）。

调试器在代码上创建一个断点，然后浏览器会刷新对屏幕的所有更改，以便您可以看到图像，alert()调用可以产生相同的效果。

我的上述状态并非100％正确，因为实际上浏览器正在事件循环下运行并延迟所有布局和绘图脚本执行时还有更多其他工作，但我认为它可以回答你的问题，如果你想要一个更精确和复杂的答案，我会很乐意写更多：）

show（）函数在div中不起作用

3 个答案: