something wrong with my loop?

Question

I want to make a box disappear and reappear alternatively by using the loop. The problem is that the box does not appear at all though the loop runs until i=10. Can someone explain this?

    for(var i=0;i<10;i++){
        if(document.getElementById("box").style.display=="none"){
            document.getElementById("box").style.display="block";}
        else{
            document.getElementById("box").style.display="none";
        }
        console.log(i);
    }

JS runs in the same thread that the browser users to paint the page. All of your code finishes running before the page updates. Look into using setTimeout() of setInterval() instead of a for loop. — nnnnnn
– nnnnnn, Commented Dec 25, 2014 at 3:30
Please give your question a title that lets people know what the problem is. — user663031
– user663031, Commented Dec 25, 2014 at 3:31

Shomz · Accepted Answer · 2014-12-25 03:31:02Z

4

The simplest explanation is that the loop iteration finishes before the rendering takes place, and you only get the end result.

See this modified version of your code, it's kind of forcing the drawing by using timeouts:

for (var i = 0; i < 10; i++) {
  setTimeout(toggle, i * 100);
}

function toggle() {
  if (document.getElementById("box").style.display == "none") {
    document.getElementById("box").style.display = "block";
  } else {
    document.getElementById("box").style.display = "none";
  }
}

#box {
  width: 50px;
  height: 50px;
  background: #eee;
}

<div id="box"></div>

answered Dec 25, 2014 at 3:31

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PMH Over a year ago

Why when I remove i in i*100, the box stands still?

Shomz Over a year ago

Because you're telling the timeout to execute its function right away and it's the same as your original code.

PMH Over a year ago

So this is the difference between java and javascript? I just considered i*100 as away to make the timeout various. I test with 10 second but the result is the same. So as you said, it is necessary to involve i in the timeout

Shomz Over a year ago

That code generates 10 timeouts, right away. They execute all in their own time. If you drop i, you'd generate 10 timeouts that would execute at the same time (whether 10 seconds from now or just 1 second, it doesn't matter, the point is that they'd execute at the same time). So that's the problem, you need spread those timeouts a bit, and that's why used i. There are tons of other ways to do it, but I thought this would be enough to help you understand what's going on inside the loop and why you only see the end result.

nnnnnn Over a year ago

PMH - reading some doco about JS timers may help. Or John Resig's Timers article.

Rodney Nogueira · Accepted Answer · 2014-12-25 03:31:21Z

0

Usually when you loop simply with (while, for, etc ...) it will run in a clock-cicle(nano-seconds, or milli-seconds) ...

For the computer, your box is appearing and disappearing. But not for humans, simply because it's too fast.

I suggest you to try you algorithm with some Javascript animations, like this one

http://www.w3schools.com/jquery/eff_fadein.asp

answered Dec 25, 2014 at 3:31

Rodney Nogueira

6951 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

something wrong with my loop?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related