如何重复 classList.add()

Question

我正在尝试将我的所有元素添加到 flash。 classList.add("activated") 将每种颜色变为黑色，而 classList.remove("activated") 将所有元素恢复为原始颜色。 正如您在 setTimeout() 中看到的那样，元素 flash 黑色持续 300 毫秒。 我希望这种情况发生 5 次（元素应该 flash 总共 5 次）。 我添加了一个有效的 for 循环（我用 alert() 对其进行了测试）。 但是，我认为 classList.add 和 remove 不能按我希望的方式工作。

有什么建议可以连续重复这种闪烁效果 5 次吗？ '''

function ClickCheck(tile) {
const index = humSeq.push(tile) - 1;
const yellow = document.querySelector(`[data-tile='yellow']`);
const red = document.querySelector(`[data-tile='red']`);
const green = document.querySelector(`[data-tile='green']`);
const blue = document.querySelector(`[data-tile='blue']`);
const remainingTaps = seq.length - humSeq.length;
if (humSeq[index] !== seq[index]) {

    var times = 5;
    var i;
    over = true;

    if (over) {
        for (i = 0; i < 5; i++) {

            yellow.classList.add('activated');
            red.classList.add('activated');
            green.classList.add('activated');
            blue.classList.add('activated');



            setTimeout(() => {
                yellow.classList.remove('activated');
                red.classList.remove('activated');
                green.classList.remove('activated');
                blue.classList.remove('activated');
            }, 300);


        }
    }

    resetGame();
    return;
}

Answer 1

您可以设置一个 flash function 每次运行时递减一个重复计数器，直到没有剩余。 像这样的东西：

 function flash (element, duration = 500, repeat = 5) { // toggle the class element.classList.toggle('flash'); setTimeout(() => { // revert it when the timeout expires element.classList.toggle('flash'); // if we haven't reached the last repeat... if (repeat > 1) { //...do it again after a delay setTimeout(() => flash(element, duration, repeat - 1), duration); } }, duration); } const div = document.querySelector('.demo'); flash(div);

 .demo { background: bisque; color: tomato; padding: 1em; font-family: sans-serif; }.flash { background: tomato; color: bisque; }

 <div class="demo">Do wookies wear hats?</div>

Answer 2

您的方法的问题是超时都是同时设置的。

据我所知，您不能按照您提议的方式执行此操作，因此另一种方法是创建一个递归 function 调用超时（类似于setInterval的工作方式）。

function PerformNTimes(startCallback, endCallback, delay, n) {
  if (n === 0) return;
  
  startCallback();

  setTimeout(() => {
    endCallback();
    PerformNTimes(startCallback, endCallback, delay, n - 1);
  }, delay);
}

startCallback是您希望在每个循环开始时运行的 function。 例如，添加类名。

endCallback是您希望在每个循环结束时运行的 function。 例如，删除类名。

delay是迭代之间的时间（如果你想要一个可变的延迟，你可以通过剩余的迭代传递一个数组和索引。

n是您希望循环到 go 的迭代次数。

我还没有测试代码是否完美运行，但我希望这是一个充分的解释，可以让你弄清楚如何解决这个问题。 这是运行代码的示例： https://jsfiddle.net/xuoc53kd/ 。

Answer 3

我没有足够的声誉来评论你的文章......你能说一下你是想要一个又一个颜色的活跃颜色还是同时所有在同一时间：

async function ClickCheck(tile) {
  const obj = {
    yellow: document.querySelector(`[data-tile='yellow']`),
    red: document.querySelector(`[data-tile='red']`),
    green: document.querySelector(`[data-tile='green']`),
    blue: document.querySelector(`[data-tile='blue']`)
  }
  const index = humSeq.push(tile) - 1;
  if (humSeq[index] !== seq[index]) {
    new Array(5).fill(0).forEach(async (x) => {
      for (const property in obj) obj[property].classList.add('activated')
      await setTimeout(300)
      for (const property in obj) obj[property].classList.remove('activated')
    })
    resetGame();
    }
}

一个接一个

async function ClickCheck(tile) {
  const obj = {
    yellow: document.querySelector(`[data-tile='yellow']`),
    red: document.querySelector(`[data-tile='red']`),
    green: document.querySelector(`[data-tile='green']`),
    blue: document.querySelector(`[data-tile='blue']`)
  }
  const index = humSeq.push(tile) - 1;
  if (humSeq[index] !== seq[index]) {
    new Array(5).fill(0).forEach(async (x) => {
      for (const property in obj) {
        obj[property].classList.add('activated')
        await setTimeout(300)
        obj[property].classList.remove('activated')
      }
    })
    resetGame();
    }
}