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

我正在显示和隐藏一个包含加载/等待gif图像的div。 单击一个按钮，我在单击函数的末尾调用$div.show和.hide。但图像并没有普遍显示出来。当我把断点放在“显示线”旁边时，它会显示图像

我也试过了。cssdisplay，，但它不起作用

请提出其他建议，或者告诉我可能有什么问题

谢谢

我的代码如下所示

$("#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
});

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

因此，在您的代码中，浏览器确实显示了div，您可以获得正确的offsetWidth和offsetHeight，但是您无法看到它，因为图形延迟了

调试器会在代码上创建一个断点，此时浏览器会刷新对屏幕的所有更改，这样您就可以看到图像，而警报调用也会产生相同的效果

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

浏览器有一种非常奇特的工作风格，执行脚本时，它会在脚本完成后延迟所有接口绘制

因此，在您的代码中，浏览器确实显示了div，您可以获得正确的offsetWidth和offsetHeight，但是您无法看到它，因为图形延迟了

调试器会在代码上创建一个断点，此时浏览器会刷新对屏幕的所有更改，这样您就可以看到图像，而警报调用也会产生相同的效果

---

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

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

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

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

---

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

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

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

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

---

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

JavaScript是单线程的，并且为UI呈现和脚本执行共享同一线程。由于浏览器进行优化的方式，您不会看到显示和隐藏效果

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

而不是这样做

我给你看电视

2.执行一些代码

3.隐藏潜水舱

你不会这么做的

我给你看电视

2当“表演”完成时

           2.1) execute your code, 
           2.2) hide the DIV

---

我创建了一个JSbin工作示例

Javascript是单线程的，相同的线程用于UI呈现和脚本执行。由于浏览器进行优化的方式，您不会看到显示和隐藏效果

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

而不是这样做

我给你看电视

2.执行一些代码

3.隐藏潜水舱

你不会这么做的

我给你看电视

2当“表演”完成时

           2.1) execute your code, 
           2.2) hide the DIV

---

我创建了一个JSbin工作示例

图像的id真的是“div”吗？如果代码运行得很快，图像在被删除之前不会出现。您应该输入setTimeout调用来隐藏图像。如果将.show和.hide放在同一个功能块中，

---

它将立即隐藏您试图显示的$div。您可能希望仅在另一个进程完成时才隐藏它。根据您的其他代码，类似.done函数的功能可能会有所帮助。我敢打赌，您的其他工作代码是一个AJAX调用，它是异步的，因此允许隐藏代码在完成之前运行。相反，执行$div.hide；一旦AJAX调用完成，使用其回调函数。图像的id真的是“div”吗？如果代码运行得很快，图像在被删除之前不会出现。您应该输入setTimeout调用来隐藏图像。如果将.show和.hide放在同一个函数块中，它将立即隐藏您试图显示的$div。您可能希望仅在另一个进程完成时才隐藏它。根据您的其他代码，类似.done函数的功能可能会有所帮助。我敢打赌，您的其他工作代码是一个AJAX调用，它是异步的，因此允许隐藏代码在完成之前运行。相反，执行$div.hide；在我的例子中，只有像if..else、循环、dom遍历和操作这样的javascript代码，在.show和.hide之间没有AJAX或任何异步的东西。是的，但在这两者之间有一些非常复杂的代码，在内部循环和函数调用方面非常复杂。我认为问题是由于javascript挂起了浏览器，并且DOM/element属性没有发生更改。在我的例子中，只有像if..else、循环、DOM遍历和操作这样的javascript代码，而在.show和.hide之间没有ajax或任何异步的东西。是的，但在这两者之间有一些非常复杂的代码，在内部循环和函数调用方面非常复杂。我认为问题是由于javascript挂起了浏览器，并且没有发生DOM/element属性更改。