使用 setTimeout 添加和删除类 [重复]答案

【问题标题】：Using setTimeout to Add and remove class [duplicate]使用 setTimeout 添加和删除类 [重复]
【发布时间】：2017-05-26 08:06:38
【问题描述】：

我想根据时间向 div 添加和删除一个类。它应该在 6 秒后添加一个类，并在 4 秒后将其删除。我尝试了一个基本的实现。为什么this 不工作？我认为问题是两个 setTimeouts 像这样在一起。如果我注释掉第二行，则第一行有效。这里发生了什么？

setTimeout(addHighlight(), 6000);
setTimeout(removeHighlight(), 10000);

有人可以告诉我如何根据delay 参数编写一个同时执行（添加和删除类）的函数吗？

【问题讨论】：

试试setTimeout(function() { addHighlight(); setTimeout(function() { removeHighlight() }, 4000) }, 6000);

【解决方案1】：

试试这个：

setTimeout(function() {
  $('#square').addClass('highlight');
}, 6000);

setTimeout(function() {
  $('#square').removeClass('highlight');
}, 10000);

【讨论】：

为什么我的代码不起作用？基本上是一样的。我已将function(){ $('#square').addClass('highlight'); } 定义为addHighlight 并像这样调用`setTimeout(addHighlight(), 6000);`
替换你的 setTimeout(addHighlight(), 6000);到 setTimeout(addHighlight, 6000);在两个 setTimeout 函数中
我知道我做了什么，谢谢你指出这一点。这是一个交易破坏者。

【解决方案2】：

这可能是你想要做的：

setTimeout(function(){
  $("#test").addClass('on');
  
  setTimeout(function(){
     $("#test").removeClass('on');
  }, 4000);
}, 6000);

.on {
  background: lime;
}

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

第一次超时在 6 秒后执行，向 div 添加一个类并开始另一个超时，在 4 秒后执行并删除该类。

【讨论】：