Javascript for loop and setTimeout issue

Question

So I thought that the following code would be really simple but has become a big headache. It should be a loop that will change the opacity of and object so that it fades away.

function doSomething()
{
    var i = 10;
    for(i = 10; i >=0; i = i - 1)
    {
        setTimeout("setOpacity('t1',"+ i +")", 100*i);
        WRITE 1
    }
}

function setOpacity(elem, hmm)
{
    WRITE 2
    document.getElementById(elem).style.opacity = (10 - hmm)/10;
    document.getElementById(elem).style.filter = 'alpha(opacity=' + (10 - hmm)*10 + ')';
}

So the problem is that the for loop is counting down from 10 to 0 and this has been confirmed by a print statement located at WRITE 1. However in the setOpacity method the numbers being received are starting at 0 and counting to 10 and this has been confirmed by a print statement at WRITE 2.

I would like to know why this is happening and how I can fix it. I believe it has something to do with the setTimeout call executing the method call after the end of the loop, but if that is so then why are the values being passed to setOpacity incrementing?

Any help is much appreciated.

I don't see what the problem is, it's working how it should. If it were to execute 10 - 0 first, that would fade IN the element. — Kyle Undefined
– Kyle Undefined, Commented Jun 21, 2011 at 15:54
Ah yes as of now it is working because of the work around I implemented. If you look in the setOpacity function I subtract hmm from 10 so that the number is the value I want. But that does not change the fact that the number is not being passed in correctly. The workaround gives me correct functionality but I'm interested in implementing this code without the workaround in it. — E Criss
– E Criss, Commented Jun 21, 2011 at 16:00
Do yourself a favor - use jQuery - it has fadeIn()/fadeOut() - among zillion other useful things — mkilmanas
– mkilmanas, Commented Jun 21, 2011 at 16:08
It's because the setOpacity('t1', 0); times out first compared to the setOpacity('t1', 10); @mkilmanas maybe they want to learn how to do it for themselves. — Kyle Undefined
– Kyle Undefined, Commented Jun 21, 2011 at 16:09
Actually the company I work for has not yet standarized jQuery on their systems so I can't use it. Trust me though I would absolutely love to use it. — E Criss
– E Criss, Commented Jun 21, 2011 at 16:13

mistagrooves · Accepted Answer · 2011-06-21 16:07:44Z

3

The values being passed to setOpacity are increasing because you are passing different timeouts. The result of your loop is essentially the following:

setTimeout("setOpacity('t1', '10')", 1000)
setTimeout("setOpacity('t1', '9')", 900)
setTimeout("setOpacity('t1', '8')", 800)
....
setTimeout("setOpacity('t1', '0')", 0)

The result is that they are called in reverse order based on the timings. So the last call gets executed in 0ms (after the function finishes), resulting in 0 as hmm, followed by 1, 2, 3 ...

To fix this you need to change 100*i to 100 * (10 - i)

answered Jun 21, 2011 at 16:07

mistagrooves

2,3371 gold badge15 silver badges16 bronze badges

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

1 Comment

E Criss Over a year ago

Yes that is it, you and Kyle both have the correct answer. Thank you for the help

Collectives™ on Stack Overflow

Javascript for loop and setTimeout issue

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related