Question

我想要以下顺序：

使用css class yellow显示div元素
在ca.期间运行一个函数巫婆5秒
删除黄色类并添加绿色css类＆＃34;状态确定＆＃34; ...

当我运行我的代码时，div函数将不会出现，直到函数完成。我还没有观察到？

＆＃13;

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");
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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属性更好[＆34; onclick＆＃34;因为这是一种突兀的做法，因此是一种不好的做法。

Jquery show（）不会等到完成

2 个答案: