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

【问题标题】：is there a way to simplify multiple setTimeout functions?有没有办法简化多个 setTimeout 函数？
【发布时间】：2021-05-16 07:52:14
【问题描述】：

我有多个 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);

【问题讨论】：

您的代码的目标是什么？它应该做什么？
如果您的目标是在某个时间间隔内切换活动类，为什么不使用 setInterval 而不是 setTimeout？？
只是一种生活质量，并延迟了一些动画，所以它看起来似乎无懈可击

标签： javascript settimeout simplify

【解决方案1】：

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

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

【讨论】：

我实际上是 javascript 新手，当我看到循环时，我有点害怕，但我马上就理解了这一点。它也奏效了！谢谢你。
这段代码在 VScode 中工作，但是当我在 netbeans 上运行它时，setTimeout 函数中无法识别变量“i”
这没有意义，它是在for (let i = 0; ....) 中声明的。它可能正在为旧版本的 JavaScript 使用转译器，并且它有一个错误。
实际上 netbeans 不支持打字稿，所以我不得不通过添加反斜杠 $(.b\${1+i}, .t\${5-i}).removeClass("active");
这是 JavaScript，不是 TypeScript。它使用 ES6 模板文字。

【解决方案2】：

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

window.setTimeout(() => $(".b1, .t5").addClass("active"),    3000);
window.setTimeout(() => $(".b1, .t5").removeClass("active"), 3200);
window.setTimeout(() => $(".b2, .t4").addClass("active"),    3100);
window.setTimeout(() => $(".b2, .t4").removeClass("active"), 3300);
window.setTimeout(() => $(".b3, .t3").addClass("active"),    3200);
window.setTimeout(() => $(".b3, .t3").removeClass("active"), 3400);
window.setTimeout(() => $(".b4, .t2").addClass("active"),    3300);
window.setTimeout(() => $(".b4, .t2").removeClass("active"), 3500);

但是由于这个接缝就像一个可重复的算法，你可以使用 for 循环：

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

【讨论】：

它与 Barmar 的答案几乎相同，并且效果也很好。很高兴拥有不止一种做事方式，我今天学到了新东西，谢谢！
是的，我们几乎是同时发的，如果我看到他的回答我就不会发了
但是请将@Barmar 的答案标记为答案，以便其他人知道您的问题已解决

【解决方案3】：

这个怎么样，


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

请告诉我您对此的看法。未来的课程可能会有所不同，并且可能不会遵循某种模式。

【讨论】：

我的目标是更短的代码，如 Barmar 和 MrCodingB 的答案，但这实际上也有效，谢谢！