在循环中使用 setTimeout

Question

Below is my 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>

I want the div's text color to be red in the order of their inner text.First <div>1</div> text should display red color and so on

So far I have done 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);
    }
  }
}

When I am debugging the values are coming correctly inside the loop and the css for the corresponding div is applied properly but when I am running the code the div's inner text is getting red color in the order I have defined in HTML.

Answer 1

You're setting the timeout to j * 1000 and j is the position in the list of divs.

The number in the text is i + 1 not j . You need to use i + 1 in your timeout value.

Answer 2

Try this:

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

Should be:

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

i not 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

Really no need to overcomplicate it.

If you're trying to highlight the numbers in order, you don't need two loops:

 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>

One loop, and simply set the timeouts for each div based on its inner number.

Answer 4

Instead of making it complicated and making a nested loop, just create a recursive call with only one loop. This will make it so that you do not create all your timeouts at once, with varying intervals.

By filtering this list before finding the min, you reduce the search by one item for each item you have to iterate over.

 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>

Answer 5

You can simplify it with:

 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>

Use setInterval to run your check every second, which consists of looping over your divs and matching an index (item here). Increment the index after every interval.

Answer 6

Ok so I looked on your loop and I can see you're over-complicating things a lot.

Remarks:

• Instead of double closure, use normal callback function:

  • Wrong:

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

  • Correct:

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

• innerText is not standard, so it only work in Google's puppets
• Your inner loop is not exactly clear to me - why not just use one loop

Working code

 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

Try this

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