setTimeout为addClass，然后检查元素是否为hasClass

Question

我无法console.log下面的消息。在setTimeout用于addClass后，hasClass不起作用吗？

<img id="swipeUp1" class="swipeUp" src="img/arrow.png">

setTimeout(function() {
    $("#swipeUp1").addClass("moveOn");
}, 500);
if ($('#swipeUp1').hasClass('moveOn')) {
    console.log("swipeup1 has class moveOn");
}

Answer 1

setTimeout()处理程序（包含addClass()的函数）在if语句之后执行，因为您明确请求不立即执行它，但是在500毫秒内。

所以下一行（if语句）会立即执行，早于addClass()。

如果您希望按顺序执行它们，则必须移动hasClass() INSIDE处理程序或addClass() OUTSIDE：

// all inside handler
setTimeout(function() {
    $("#swipeUp1").addClass("moveOn");

    if ($('#swipeUp1').hasClass('moveOn')) {
        console.log("swipeup1 has class moveOn");
    }
}, 500);

或者：

// no setTimeout at all
$("#swipeUp1").addClass("moveOn");

if ($('#swipeUp1').hasClass('moveOn')) {
    console.log("swipeup1 has class moveOn");
}