Манипулирование DOM внутри цикла происходит слишком быстро - PullRequest
Новая
       36

Манипулирование DOM внутри цикла происходит слишком быстро

1 голос
/ 11 ноября 2019

Попытка прошить div другим цветом с некоторым промежутком времени между ними (без использования jquery). программа отлично работает в отладчике, но при запуске все изменения происходят слишком быстро, и пользователь ничего не видит.

попытался использовать setTimeout безрезультатно (вероятно, неправильно его использовал) 

function makeBoard() {
var squareNum = 4
var selected
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
for (let index = 0; index < squareNum; index++) {
    squareDiv = document.createElement('div')
    squareDiv.className = 'square'
    squareDiv.id = '' + (index + 1)
    container.appendChild(squareDiv)
}
selected = document.getElementById('1')
selected.classList.add('selected')
return selected
}

function dimSwitch() {
var turnCnt = 1
var posIndex = 0
var selectedDivs = []
var tempCnt = 0
var tempIndex = 0
var timeNum = getMaxPos()
while (tempCnt < timeNum) {
    var posIndex = posArr.indexOf(turnCnt, tempIndex)
    tempIndex = posIndex + 1
    while (posIndex !== -1) {
        selectedDivs.push(document.getElementById(posIndex + 1 + ''))
        posIndex = posArr.indexOf(turnCnt, tempIndex)
        tempIndex = posIndex + 1
    } 
    selectDiv(selectedDivs) //After this i would like a small delay
    turnCnt++
    tempCnt++
    for (let index = 0; index < selectedDivs.length; index++) {
        selectedDivs[index].classList.remove('selected')
    }
    selectedDivs = []
}
}

function drawMove(currDiv, direction) {
 var nextDiv
 currDiv.classList.remove('selected')
 nextDiv = document.getElementById((parseInt(currDiv.id) + direction))
 nextDiv.classList.add('selected')
 return nextDiv
}

function selectDiv(divs) {
for (let index = 0; index < divs.length; index++) {
    divs[index].classList.add('selected')
}
}
function getMaxPos() {
var maxNum = 0
for (let index = 0; index < posArr.length; index++) {
    if (posArr[index] > maxNum) maxNum = posArr[index]
}
return maxNum
}

var TurnNum = 4 //Number of turns
var posArr = [1]
var turnCnt = 1
var currDiv = makeBoard()

document.onkeydown = function (event) {
switch (event.keyCode) {
    case 37:
        //Left Key -1
        posArr[turnCnt] = posArr[turnCnt - 1] - 1
        currDiv = drawMove(currDiv, -1)
        turnCnt++
        break;

    case 39:
        //Right key +1
        posArr[turnCnt] = posArr[turnCnt - 1] + 1
        currDiv = drawMove(currDiv, 1)
        turnCnt++
        break;

    case 40:
        currDiv.classList.remove('selected')
        dimSwitch()
        break;
}
if (turnCnt === TurnNum) {
    currDiv.classList.remove('selected')
    dimSwitch()
}
};

функция selectDivs должна запускаться с некоторым интервалом между каждым выполнением, когда с помощью задержки или тайм-аута она зависает или корректно выполняет работу. Пользователь должен иметь возможность видеть, какие элементы div выделены красным (класс selected) перед тем, как удалитькласс в цикле for.

JS FIDDLE FULL CODE

Вот как я пытался использовать setTimeout, но остальная часть кода продолжает работать в фоновом режиме и что ясм. все div в красном: 

setTimeout(function(){ 
for (let index = 0; index < selectedDivs.length; index++) { 
       selectedDivs[index].classList.remove('selected') 
   } 
 },1000)

Ответы [ 2 ]

0 голосов
/ 11 ноября 2019

Самый простой способ - сделать рекурсивный цикл, используя тайм-аут для задержки вызова. Доказательство концепции ниже: 

var childDivs = document.querySelectorAll('.child'); 

function selectDivs(divs, index, delay) {
  divs[index].classList.add('selected');
  
  delay = delay || 1000;  // if you want to change the delay
  index++
  
  if (index < divs.length) {
    setTimeout(function() {
      selectDivs(divs, index, delay);    
    }, delay);    
  }
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 100px;
  width: 100px;
  box-sizing: border-box;

  background-color: yellow;
  border: 1px solid #000;
}

.selected {
  background-color: red;
}
<body onload="selectDivs(childDivs, 0)">

  <div class="flex-container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  
</body>

Я бы лично использовал CSS, насколько смог, установив CSS-переменную, чтобы задержать изменение. Только для того, чтобы иметь возможность следить за тем, что происходит легче в DOM. 

var childDivs = document.querySelectorAll('.child'); 

function selectDivs(children) {
  let child = {};

  for (let i = 0; i < children.length; i++) {
    child = children[i];
    
    child.style.setProperty('--background-animation-delay', i+'s');
    child.classList.add('selected');  
  }
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  --background-animation-delay: 0s;
  
  height: 100px;
  width: 100px;
  box-sizing: border-box;

  background-color: #ffff00;
  border: 1px solid #000;
  
  transition: background-color 0s var(--background-animation-delay);
}

.selected {
  background-color: #ff0000;
}
<body onload="selectDivs(childDivs)">

  <div class="flex-container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  
</body>
0 голосов
/ 11 ноября 2019

Вы поместили код цикла в блок setTimeout, чтобы весь цикл выполнялся с первого взгляда, но через 1000 миллисекунд. Если вы хотите, чтобы элементы появлялись с задержкой по одной секунде, вы можете изменить логику так, чтобы установить различное время ожидания (1000 * index) для каждого элемента: 

for (let index = 0; index < selectedDivs.length; index++) { 
   setTimeout(function(){ 
        selectedDivs[index].classList.remove('selected') 
    }
    , (1000 * index)
    )
}
...