Jquery show() 不会等到完成

Question

我想要以下顺序：

显示带有 css class 黄色的 div 元素
运行 ca 期间的函数女巫。 5 秒
删除黄色 class 并添加绿色 css class "state 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, you can then delay (if necessary using jquery.delay) and finally you can queue up (using jquery.queue) 删除 "Yellow" class 并添加 "Green" class.

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" 好得多，因为它是一种突兀的做法，因此是一种不好的做法。

Jquery show() 不会等到完成

Jquery show() doesn't wait until complete

html

javascript

css

jquery

show-hide