1

我正在显示和隐藏一个包含加载/等待 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
});
4

3 回答 3

2

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

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

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

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

于 2013-02-05T05:57:58.697 回答
2

Javascript 是单线程的，UI 渲染和脚本执行共享同一个线程。由于浏览器进行优化的方式，您看不到 show() 和 hide() 效果。

您可以利用 JQuery 承诺机制来解决您的问题。这里的例子

而不是这样做

1) 显示 DIV

2）执行一些代码

3）隐藏DIV

你会这样做的

1) 显示 div

2) 当'show'完成时

           2.1) execute your code, 
           2.2) hide the DIV

我在这里创建了一个 JSbin 工作示例

于 2013-02-05T06:15:16.650 回答
1

浏览器有一种非常花哨的工作方式，当脚本执行时，它会在脚本完成后延迟所有界面绘制。

所以在你的代码中，浏览器确实显示了 div （你可以得到正确的offsetWidthand offsetHeight）但是你看不到它（因为绘图被延迟了）。

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

我的上述状态不是 100% 正确的，因为实际上浏览器正在事件循环下工作，并且在脚本执行时延迟了所有布局和绘图以及更多其他工作，但我认为它可以回答你的问题，如果你想要更精确和复杂的答案，我很乐意写更多:)

于 2013-02-05T05:47:52.927 回答