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

Question

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

Answer 1

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

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

Answer 2

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

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

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

请让我知道您对此有何看法。类将来可能会有所不同，并且可能不会遵循某种模式。

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

is there a way to simplify multiple setTimeout functions?

javascript

simplify

settimeout