Jquery show() 不会等到完成

Question

我想要以下顺序：

1. 显示带有黄色 css 类的 div 元素
2. 在 ca 期间运行一个函数女巫。 5 秒
3. 删除黄色类并添加绿色css类“状态Ok”...

当我运行我的代码时，在函数完成之前不会出现 div 容器。我还没有观察到？

function sleepFor(sleepDuration) {
    var now = new Date().getTime();
    while (new Date().getTime() < now + sleepDuration) { /* do nothing */ }
}



function DoIt() {
    $('#divState').show(100, function() {});
    sleepFor(1000);    
    $("#divState").removeClass("Yellow").addClass("Green");
}

div {
    display: none;    
}


div.Green {
    border: 1px solid black;
    background-color: #93EEAA;
}

div.Yellow {
    border: 1px solid black;
    background-color: #FFEE99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="button" onclick="DoIt()" value="run" />
<div class="Yellow" id="divState">Some Text</div>

Answer 1

我假设您想展示您的元素，使用jquery.show 执行此操作，然后您可以延迟（如有必要使用jquery.delay），最后您可以排队（使用jquery.queue）删除“黄色”类和“绿色”类的添加。

function DoIt() {
    $('#divState').show(100).delay(1000).queue(function(){
          $(this).removeClass("Yellow").addClass("Green");
          $.dequeue(this)
      });
   
}

div {
    display: none;    
}


div.Green {
    border: 1px solid black;
    background-color: #93EEAA;
}

div.Yellow {
    border: 1px solid black;
    background-color: #FFEE99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="button" onclick="DoIt()" value="run" />
<div class="Yellow" id="divState">Some Text</div>

Answer 2

你为什么要空手而归？在 javascript 中，有一个本地方法可以等待一段时间，如果您只是在 google 上搜索它，您会立即找到它。

setTimeout(function() {
    $("#divState").removeClass("Yellow").addClass("Green");
},5000);

这会在执行定义的回调之前等待 5000 毫秒。然后，您可以像这样在单击按钮时执行此代码（假设您将按钮 ID 设为 myButton）：

$("#myButton").click(function(){
    setTimeout(function() {
        $("#divState").removeClass("Yellow").addClass("Green");
    },5000);
});

这比使用 html 属性“onclick”要好得多，因为它是一种突兀的做法，因此是一种不好的做法。