javascript - 为什么我不能使用 jquery 延迟 addClass 和 removeClass？

Question

这是我的代码:

   $("#form_editor").addClass('abcd')
   $("#form_editor").delay(32000).removeClass('abcd')

如果第二行未注释，则该类永远不会被应用。如果我将其注释掉，那么该类(class)将按预期应用。似乎第二行执行时没有任何延迟，即忽略 .delay(32000)。

延迟是否与 addClass 和 removeClass 一起使用？我以为它会延迟对它之后的任何函数的调用，但显然不会，因为它似乎会立即执行。

Answer 1

你可以，但你需要queue()

$("#form_editor").addClass('abcd').delay(3200).queue(function() {
  $(this).removeClass('abcd');
});

.abcd:before{
  content:"abcd";
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_editor">efgh....</div>

或使用setTimeout方法:

var $formEditor = $("#form_editor"); // we plan to reuse it so let's cache it!

$formEditor.addClass('abcd'); // add

setTimeout(function(){
  $formEditor.removeClass('abcd');  // remove
}, 3200);

.abcd:before{
  content:"abcd";
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_editor">efgh....</div>

jQuery 动画(.animate、.fadeTo、fadeIn 等...)添加到动画队列堆栈，一个 jQuery 内部函数而不是处理“下一步是什么？”(通俗地说)，而其他 “无动画” 方法(如 .text()、addClass()、.on()、.click() 等)不会。

为了轻松记住 .queue()，可以将其视为 .delay(2000, function(){/*BAM!*/}) 缺少的(实际上是)回调功能/* 不幸的是，这行不通 */