forEach循环中的setTimeout仅显示顺序中的特定元素

问题描述 投票:1回答:1

这里是我的密码笔的链接:https://codepen.io/apasric4/pen/zYYydYP

单击开始按钮时,板上的一系列颜色应点亮。控制台记录了颜色数组,并选择了具有相应颜色的框元素。带有changeOpacity函数的超时功能将框的颜色的不透明度更改几秒钟,然后将其恢复正常以创建所需的效果。

这部分代码是上面解释的。

btn.addEventListener('click', ()=> {
  if (!gamePlay) {
    gamePlay=true;
    createSequence(number);
    gameClicks.forEach((color,i)=> {
      box=document.querySelector(`.box[data-color=${color}]`)
      setTimeout(()=> {
        changeOpacity();
      }, 200*i);
    })
  }
});


function changeOpacity() {
  box.classList.toggle('active');
  setTimeout(()=> {
  box.classList.toggle('active');
  }, 300);
}

但是,我的问题是,当序列运行时,特别是只有一种颜色会点亮。这对我来说很奇怪。例如,单击开始时,也许只有带有黄色颜色属性的框会亮起。我不明白为什么会这样。

javascript foreach timer
1个回答
0
投票

将当前的changeOpacity传递给box(并确保在函数内部正确确定box的范围,而不是使其成为隐式的全局变量):

btn.addEventListener('click', () => {
  if (!gamePlay) {
    gamePlay = true;
    createSequence(number);
    gameClicks.forEach((color, i) => {
      const box = document.querySelector(`.box[data-color=${color}]`)
      setTimeout(() => {
        changeOpacity(box);
      }, 200 * i);
    })
  }
});


function changeOpacity(box) {
  box.classList.toggle('active');
  setTimeout(() => {
    box.classList.toggle('active');
  }, 300);
}

© www.soinside.com 2019 - 2024. All rights reserved.