Javascript没有遵循一步一步的指令

Javascript not following step by step instruction

本文关键字：一步 指令 Javascript      更新时间：2023-09-26

这是我的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

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

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

.img还没有呈现在屏幕上，因为调用堆栈仍然很忙，所以浏览器什么也不做，等待你的代码完成执行。然后写入代码

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

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

您正在快速更新display的值。如果你添加一个超时，你会看到图像实际上显示然后隐藏。

更改不直接呈现(参见@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>

相关文章：