Javascript未遵循分步说明

Question

这是我的html

$(function(){
    $(".button1").on("click",function(){
        $(".img").css("display","block");
        $(".bord").append('<div class="test1">11111111</div>');
        $(".img").css("display","none");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         
<div class="parent">
     <div class="button1">button1</div>
     <div class="button2">button2</div>
</div>
            
<div class="bord">
     <img src="http://www.mtlexs.com/images/reload.gif" class="img" style="display: none;">
 </div>
         
        
            

我在这里写代码，当button1点击显示图像，然后显示文本，然后隐藏图像。但是这里的图片没有显示

然后我更改代码以显示图像和显示文本，它正在工作

 $(function(){
       $(".button1").on("click",function(){
             $(".img").css("display","block");
             $(".bord").append('<div class="test1">11111111</div>');
       });   
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="parent">
      <div class="button1">button1</div>
      <div class="button2">button2</div>
</div>
                
<div class="bord">
      <img src="http://www.mtlexs.com/images/reload.gif" class="img" style="display: none;">
</div>

那么我的第一个代码有什么问题？

我需要show image->show text-->hide image

请检查。

Answer 1

为了显示.img，浏览器需要经过重排和重绘过程，并且只有在调用堆栈为空（您的代码未运行）时才有可能。 这意味着当您输入以下内容时：

$(".img").css("display","block");

.img 尚未呈现在屏幕上，因为调用堆栈仍然很忙，因此浏览器什么也不做，等待您的代码完成执行。然后你把这段代码

$(".img").css("display","none");

这会返回到之前的状态。当您的代码完成执行时，根本不会发生回流或重绘过程。而且您在屏幕上看不到您的按钮。

Answer 2

您正在将 display 的值更新为 quicky。如果您添加超时，您将看到图像实际显示然后隐藏。

更改不会直接呈现（参见@Maximus 的回答）

添加一个超时，它会按照你的意愿工作

$(function() {

  $(".button1").on("click", function() {

    $(".img").css("display", "block");
    $(".bord").append('<div class="test1">11111111</div>');
    setTimeout(
      function() {
            $(".img").css("display", "none");
      }, 2000);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="parent">
  <div class="button1">button1</div>
  <div class="button2">button2</div>
</div>

<div class="bord">
  <img src="http://www.mtlexs.com/images/reload.gif" class="img" style="display: none;">
</div>