javascript - setTimeout 到 addClass，然后检查元素是否有Class

Question

我无法控制台记录以下消息。使用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() 移至处理程序内部或将 addClass() 移至外部:

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