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>

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

我需要显示图像->显示文本-->隐藏图像

请检查。

Answer 1

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

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

.img 尚未在屏幕上呈现，因为调用堆栈仍然繁忙，因此浏览器不执行任何操作并等待代码完成执行。然后你输入这段代码

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

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