использованием SetTimeout внутри цикла

Question

Ниже мой HTML OCDE

<div>6</div> 
<div>2</div> 
<div>7</div> 
<div>5</div> 
<div>9</div> 
<div>4</div> 
<div>8</div> 
<div>1</div> 
<div>3</div> 

Я хочу, чтобы цвет текста в DIV, чтобы быть красным в порядке их внутреннего text.First <div>1</div> текста должен отображать красный цвет и так далее

до сих пор я сделал this-

var divs = document.getElementsByTagName('div'); 
for (var i = 0; i < divs.length; i++) { 
    for (var j = 0; j < divs.length; j++) { 
    if (parseInt(divs[j].innerText, 10) == i + 1) { 
     (function(index) { 
     setTimeout(function() { 
      divs[index].style.color = 'red'; 
     }, j * 1000); 
     })(j); 
    } 
    } 
} 

Когда я отлаживаю, значения правильно поступают внутри цикла, а css для соответствующего div применяется правильно, но когда я запускаю код, внутренний текст div получает красный цвет в том порядке, который я определил в HTML.

Answer 1

Вы устанавливаете таймаут j * 1000 и j - это позиция в списке разделов.

Номер в тексте: i + 1 не j. Вы должны использовать i + 1 в своем значении таймаута.

Answer 2

Попробуйте это:

divs[index].style.color = 'red'; 
    }, j * 1000); 

Должно быть:

divs[index].style.color = 'red'; 
    }, (i + 1) * 1000); 

я не J ...

var divs = document.getElementsByTagName('div'); 
 
for (var i = 0; i < divs.length; i++) { 
 
    for (var j = 0; j < divs.length; j++) { 
 
    if (parseInt(divs[j].innerText, 10) == i + 1) { 
 
     (function(index) { 
 
     setTimeout(function() { 
 
      divs[index].style.color = 'red'; 
 
     }, (i + 1) * 1000); 
 
     })(j); 
 
    } 
 
    } 
 
}

<div>6</div> 
 
<div>2</div> 
 
<div>7</div> 
 
<div>5</div> 
 
<div>9</div> 
 
<div>4</div> 
 
<div>8</div> 
 
<div>1</div> 
 
<div>3</div>

Answer 3

Вы можете упростить его остроумие ч:

var item = 1; 
 
var divs = document.getElementsByTagName('div'); 
 
clr = setInterval(function() { 
 
    for (var i = 0; i < divs.length; i++) { 
 
    if (parseInt(divs[i].innerText, 10) == item) divs[i].style.color = 'red'; 
 
    } 
 
    item++; 
 
    if (item > i) clearInterval(clr); 
 
}, 1000)

<div>6</div> 
 
<div>2</div> 
 
<div>7</div> 
 
<div>5</div> 
 
<div>9</div> 
 
<div>4</div> 
 
<div>8</div> 
 
<div>1</div> 
 
<div>3</div>

Используйте setInterval для запуска проверки каждого второй, который состоит из цикла по вашей диве и соответствия индекса (пункт здесь). Увеличивайте индекс после каждого интервала.

Answer 4

На самом деле не нужно слишком усложнять его.

Если вы пытаетесь выделить номера в порядке, вам не нужны две петли:

var divs = document.getElementsByTagName('div'); 
 
for (var i = 0; i < divs.length; i++) { 
 
    (function(index) { 
 
    setTimeout(function() { 
 
     divs[index].style.color = 'red'; 
 
    }, divs[index].innerText * 1000); 
 
    })(i); 
 
}

<div>6</div> 
 
<div>2</div> 
 
<div>7</div> 
 
<div>5</div> 
 
<div>9</div> 
 
<div>4</div> 
 
<div>8</div> 
 
<div>1</div> 
 
<div>3</div>

одну петлю, а просто установить время ожидания для каждого Div на основе его внутреннее число.

Answer 5

Попробуйте

for(var i=0;i<divs.length;i++){ 
    var contentValue = parseInt(divs[j].innerText,10); 
    setTimeout(function() { divs[index].style.color = 'red'; }, contentValue * 1000); 
} 

Answer 6

Ok так что я посмотрел на свою петлю, и я вижу, что ты более-усложнять много.

Примечания:

• Вместо двойного закрытия, использовать нормальную функцию обратного вызова:

  • Неправильно:

    for(var i = ...) { 
        setTimeout((function(num) {return function(num) { ... };})(i), time)  
    } 
    

  • Правильно:

    for(var i = ...) { 
        setTimeout(myFunction, time, i); 
    } 
    function myFunction(num) { ... } 
    

• innerText не является стандартным, поэтому он работает только в марионеток Google,
• Ваша внутренняя петля не совсем ясно мне - почему бы не использовать одну петлю

Рабочий код

var divs = document.getElementsByTagName('div'); 
 

 
for (var i = 0; i < divs.length; i++) { 
 
    // innerText is not cross browser and not standard 
 
    var number = parseInt(divs[i].innerHTML,10); 
 
    // Debug 
 
    console.log(number, divs[i].innerHTML); 
 
    // As many seconds as div contents 
 
    setTimeout(highlightDiv, 1000*(number), divs[i]);      
 
} 
 
// It's stupid to recreate function() {} foe every timeout 
 
// so I created standalone function instead 
 
function highlightDiv(div) { 
 
    div.className = "timeout";  
 
}

.timeout { 
 
    color: red; 
 
    background-color: yellow; 
 
}

<div>6</div> 
 
<div>2</div> 
 
<div>7</div> 
 
<div>5</div> 
 
<div>9</div> 
 
<div>4</div> 
 
<div>8</div> 
 
<div>1</div> 
 
<div>3</div>

Answer 7

Вместо того, чтобы он complicat ed и создание вложенного цикла, просто создайте рекурсивный вызов только с одним циклом. Это сделает так, что вы не создадите все свои таймауты одновременно с различными интервалами.

Отфильтровывая этот список перед поиском минимума, вы уменьшаете поиск по одному элементу для каждого элемента, который вы должны перебирать.

selectInOrder(document.getElementsByTagName('div')); 
 

 
function selectInOrder(elements) { 
 
    if (elements.length > 0) { 
 
    var item = minItem([].filter.call(elements, function(el) { 
 
     return el.dataset.found === undefined; 
 
    }), function(el) { 
 
     return parseInt(el.innerText, 10); 
 
    }); 
 
    if (item) { 
 
     item.dataset.found = true; 
 
     setTimeout(function() { 
 
     item.style.color = 'red'; 
 
     selectInOrder(elements); 
 
     }, 1000); 
 
    } 
 
    } 
 
} 
 

 
function minItem(items, itemFn) { 
 
    var min = Number.POSITIVE_INFINITY; 
 
    var item = null; 
 
    for (var i = items.length - 1; i >= 0; i--) { 
 
    var localMin = itemFn.call(items[i], items[i]); 
 
    if (localMin < min) { 
 
     min = localMin; 
 
     item = items[i]; 
 
    } 
 
    } 
 
    return item; 
 
}

<div>6</div> 
 
<div>2</div> 
 
<div>7</div> 
 
<div>5</div> 
 
<div>9</div> 
 
<div>4</div> 
 
<div>8</div> 
 
<div>1</div> 
 
<div>3</div>