Javascript 有没有办法简化多个setTimeout函数？

我有多个setTimeout函数，这使我的代码看起来很懒，很长。有没有办法简化这一点

window.setTimeout(function () {
  $('.b1, .t5').addClass('active');
}, 3000);
window.setTimeout(function () {
  $('.b1, .t5').removeClass('active');
}, 3200);

window.setTimeout(function () {
  $('.b2, .t4').addClass('active');
}, 3100);
window.setTimeout(function () {
  $('.b2, .t4').removeClass('active');
}, 3300);

window.setTimeout(function () {
  $('.b3, .t3').addClass('active');
}, 3200);
window.setTimeout(function () {
  $('.b3, .t3').removeClass('active');
}, 3400);

window.setTimeout(function () {
  $('.b4, .t2').addClass('active');
}, 3300);
window.setTimeout(function () {
  $('.b4, .t2').removeClass('active');
}, 3500);

---

您可以使用箭头函数将语句减少到每行一行：

window.setTimeout（（）=>$（.b1.t5”）.addClass（“活动”），3000；
setTimeout（（）=>$（.b1.t5”）.removeClass（“活动”），3200；
window.setTimeout（（）=>$（.b2.t4”）.addClass（“活动”），3100；
window.setTimeout（（）=>$（.b2.t4”）.removeClass（“活动”），3300；
window.setTimeout（（）=>$（.b3.t3”）.addClass（“活动”），3200；
setTimeout（（）=>$（.b3.t3”）.removeClass（“活动”），3400；
window.setTimeout（（）=>$（.b4.t2”）.addClass（“活动”），3300；
setTimeout（（）=>$（.b4.t2”）.removeClass（“活动”），3500；

但是，由于这类似于可重复的算法，因此可以用于循环：

for (let i = 0; i < 4; i++) {
    const element = $(`.b${i + 1}, .t${5 - i}`);
    window.setTimeout(() => element.addClass('active'),    3000 + i * 100);
    window.setTimeout(() => element.removeClass('active'), 3200 + i * 100);
}

for（设i=0；i<4；i++）{
常量元素=$（`.b${i+1}、.t${5-i}`）；
window.setTimeout（（）=>element.addClass（'active'），3000+i*100）；
setTimeout（（）=>element.removeClass（'active'），3200+i*100）；
}

由于所有类和超时都遵循简单的模式，因此可以使用循环

for (let i = 0; i < 4; i++) {
    setTimeout(function() {
        $(`.b${1+i}, .t${5-i}`).addClass("active");
    }, 3000 + i*100);
    setTimeout(function() {
        $(`.b${1+i}, .t${5-i}`).removeClass("active");
    }, 3200 + i*100);
}

for（设i=0；i<4；i++）{
setTimeout（函数（）{
$（`b${1+i}、.t${5-i}'）.addClass（“活动”）；
}，3000+i*100）；
setTimeout（函数（）{
$（`b${1+i}、.t${5-i}'）.removeClass（“活动”）；
}，3200+i*100）；
}

这个怎么样

const actions = [
    { class: ".b1, .t5", classParam: "active", addTimeout: 3000, removeTimeout:3200 },
    { class: ".b2, .t4", classParam: "active", addTimeout: 3100, removeTimeout:3100 },
    { class: ".b3, .t3", classParam: "active", addTimeout: 3200, removeTimeout:3400 },
    { class: ".b4, .t2", classParam: "active", addTimeout: 3300, removeTimeout:3500 },
];

for (let i = 0; i < actions.length; i++) {
    let el = actions[i];
    window.setTimeout(function () {
        $(el.class).addClass(el.classParam);
    }, el.addTimeout);
    window.setTimeout(function () {
        $(el.class).addClass(el.classParam);
    }, el.removeTimeout);
}

常量动作=[
{class:.b1、.t5”、classParam:“活动”、addTimeout:3000、removeTimeout:3200}，
{class:.b2，.t4'，classParam:“活动”，addTimeout:3100，removeTimeout:3100}，
{class:“.b3，.t3”，classParam:“活动”，addTimeout:3200，removeTimeout:3400}，
{class:“.b4，.t2”，classParam:“活动”，addTimeout:3300，removeTimeout:3500}，
];
for（设i=0；i

---

一定要让我知道你的想法。类将来可能会有所不同，并且可能不会遵循某种模式。

代码的目标是什么？它应该做什么？如果你的目标是在一定的时间间隔内切换活动类，为什么不使用setInterval而不是setTimeout？这只是一种生活质量，并延迟一些动画，因此看起来很简单。当我看到它们时，我对javascript和循环有点陌生，但我马上就理解了这一点。它也起作用了！谢谢。这段代码在VScode中工作，但当我在netbeans上运行它时，变量“I”在setTimeout函数中无法识别，这毫无意义，它在

中声明为（让I=0；…）

。它可能对旧版本的JavaScript使用了一个transpiler，但它有一个bug。实际上netbeans不支持typescript，所以我不得不通过放置反斜杠$（

.b\${1+i}、.t\${5-i}

）来解决问题。removeClass（“active”）；这是JavaScript，不是TypeScript。它使用ES6模板文本。它与Barmar的答案几乎相同，而且也能正常工作。很高兴有不止一种方法做事情，我今天学到了新的东西谢谢！是的，我们几乎是在同一时间发布的，如果我看到他的答案我就不会发布了，但是请把@Barmar的答案标记为答案，这样其他人就会知道你的问题是solvedI的目标是一个像Barmar和MrCodingB的答案这样的短代码，但这实际上也很有效，谢谢！