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

如何解决有没有办法简化多个 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);

解决方法

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

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

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

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

这个怎么样，


const actions = [
    { class: ".b1,.t5",classParam: "active",addTimeout: 3000,removeTimeout:3200 },{ class: ".b2,.t4",addTimeout: 3100,removeTimeout:3100 },{ class: ".b3,.t3",addTimeout: 3200,removeTimeout:3400 },{ class: ".b4,.t2",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);
}

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