Javascript + timer

Question

See the code below...it changes the image after the page load + 8 sec and then keep on changing every 1 second.

setInterval(function(){
    setTimeout(function(){
         $('#person1').attr('src', 'lastwavewinnerimages/wtrhwt.jpg');

         setTimeout(function(){
             $('#person1').attr('src', 'lastwavewinnerimages/t8yejty.jpg');

             setTimeout(function(){
                 $('#person1').attr('src', 'lastwavewinnerimages/t2tgw8.jpg');

                 setTimeout(function(){
                     $('#person1').attr('src', 'lastwavewinnerimages/45234.jpg');

                     setTimeout(function(){
                         $('#person1').attr('src', 'lastwavewinnerimages/14134.jpg');

                         setTimeout(function(){
                             $('#person1').attr('src', 'lastwavewinnerimages/124t234grq.jpg');

                             setTimeout(function(){
                                 $('#person1').attr('src', 'lastwavewinnerimages/frbvqw34.jpg');

                                 setTimeout(function(){
                                     $('#person1').attr('src', 'lastwavewinnerimages/14tqwrbfws.jpg');
                                }, 1000);
                            }, 1000);
                        }, 1000);
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 8000);

This loop execute after 8 sec. I want it to start it from the very first second when the page load. How to do it.

The. Code. Is. Ugly. You should refactor to use an array. – John Dvorak Nov 15 '12 at 10:30 — John Dvorak, Nov 15 '12 at 10:30

Esailija · Accepted Answer · 2012-11-15T10:41:12.007

7

setInterval waits for the 8000 to pass before the function is first called, also you might wanna refactor the code like so:

$(function(){
    var images = ['lastwavewinnerimages/wtrhwt.jpg',
                'lastwavewinnerimages/t8yejty.jpg',
                'lastwavewinnerimages/t2tgw8.jpg',
                'lastwavewinnerimages/45234.jpg',
                'lastwavewinnerimages/14134.jpg',
                'lastwavewinnerimages/124t234grq.jpg',
                'lastwavewinnerimages/frbvqw34.jpg',
                'lastwavewinnerimages/14tqwrbfws.jpg'];
    var i = 0;

    function k() {
        $('#person1').attr('src', images[i % images.length]);
        i++;
    }

    setInterval( k, 1000 );
    k();
});

edited Nov 15 '12 at 10:41

answered Nov 15 '12 at 10:29

Esailija

130,716
22
250
308

Also I would suggest that you create IMG tag for all these images so that all the images load at the same time. And instead of replacing SRC replace the whole image image. – Talha Ahmed Khan Nov 15 '12 at 10:32
Why are you making the function return itself? – Asad Saeeduddin Nov 15 '12 at 10:33
1

@Asad I guess I'm being overly clever, I'll edit it to be more friendly – Esailija Nov 15 '12 at 10:34
@Esailija It just seems somewhat redundant, if you remove the return and the invocation brackets you get identical results. – Asad Saeeduddin Nov 15 '12 at 10:35
@Asad nope, the difference is that the function is called right away for the first time, rather than waiting for 1000 first to pass. That's why the friendly solution has `k()` after `setInterval`, to call it immediately – Esailija Nov 15 '12 at 10:35
@Douglas it is not global, there is a comma after the array. `var a,b,c;` makes 3 local variables where as `var a; b; c;` makes one local and two global – Esailija Nov 15 '12 at 10:36
@Esailija: Yes, I missed that. I probably missed it because of the lack of indentation, I assumed it was at the same level as the rest of the code in the method. – Douglas Nov 15 '12 at 10:39
Does this really wait for 8000 seconds? – Asad Saeeduddin Nov 15 '12 at 10:39
@Asad this one doesn't. OP's code does, and instead of being a chain of events it is a fishbone. – John Dvorak Nov 15 '12 at 10:39
@Asad no it doesn't, the op said he wants it to run right away instead of waiting for 8000 milliseconds – Esailija Nov 15 '12 at 10:40
Hey is it OK with you if I copy paste some of this code for a different approach (the massive array etc.)? – Asad Saeeduddin Nov 15 '12 at 10:47
@Asad AFAIRC, all answers here are implicitly licenced under the Creative Commons licence. – John Dvorak Nov 15 '12 at 10:51
Sure, all answers posted here are [CC-BY-SA](http://meta.stackexchange.com/a/54767/174972) – Esailija Nov 15 '12 at 10:51

score 1 · Answer 2 · answered Nov 15 '12 at 10:54

1

Another approach could be to set a timeout after every iteration:

(function() {
    var imagearray = ['lastwavewinnerimages/wtrhwt.jpg',
                                'lastwavewinnerimages/t8yejty.jpg',
                                'lastwavewinnerimages/t2tgw8.jpg',
                                'lastwavewinnerimages/45234.jpg',
                                'lastwavewinnerimages/14134.jpg',
                                'lastwavewinnerimages/124t234grq.jpg',
                                'lastwavewinnerimages/frbvqw34.jpg',
                                'lastwavewinnerimages/14tqwrbfws.jpg'];
    var i = 0; //credit goes to Esailija

    (function nextimg() {
        $('#person1').attr('src', imagearray[i++ % imagearray.length]);
        setTimeout(nextimg, 1000);
    })();
})();

answered Nov 15 '12 at 10:54

Asad Saeeduddin

43,250
5
81
127

Note: the only difference between this and the other answer is the use of `setTimeout` instead of `setInterval` to do the same loop. – John Dvorak Nov 15 '12 at 10:57
@JanDvorak Yeah pretty much. Also, the way I am setting the timeout is slightly different, because I can just invoke the function without having to return anything, since I am not passing the function to another function. This makes the code cleaner IMO. – Asad Saeeduddin Nov 15 '12 at 10:59
@JanDvorak Another critical advantage of this approach is that you can set the timeout within the load handler of the image, which makes sure the next one is shown 1s after the image is actually loaded. This can't be done with setinterval. – Asad Saeeduddin Nov 15 '12 at 11:06
Good point - but then you should also attach an `error` handler on the image in case it doesn't load ;-) – John Dvorak Nov 15 '12 at 11:10

score -1 · Answer 3 · edited May 23 '17 at 12:27

-1

Its a duplicate of Javascript that executes after page load

All you need to do is put your code under window.onload event. Your code will run just after the page load. You may not get expected result when you change the image. Because it will start loading the image when you change the image source. If you preload your images you will get the expected result. Here are the 3 ways to preload images.

3 Ways to Preload images

edited May 23 '17 at 12:27

Community

1
1

answered Nov 15 '12 at 10:36

Hasanavi

7,707
2
25
35

2

This question being a duplicate should be a comment. – John Dvorak Nov 15 '12 at 10:37

score -2 · Answer 4 · answered Nov 15 '12 at 10:42

-2

Instead of using setInterval, write a recursive function like this.

function loopImages() {
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/wtrhwt.jpg')", 1000);
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/t8yejty.jpg')", 1000);
   setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/t2tgw8.jpg')", 1000);
   ..
   ..
   ..
   ..
   ..
   setTimeout("loopImages()",0);
}

onload = "loopImages()"

answered Nov 15 '12 at 10:42

Ravi Sankar Raju

2,620
2
15
16

The last line will queue up loopImages to run again after zero milliseconds, and the list of setTimeouts are all scheduled to run at the same time. Instead they should be queued to run one after another. Also, it would be better to pass in a function reference instead of a string to setTimeout: http://www.jslint.com/lint.html#evil – Douglas Nov 15 '12 at 10:45
Also, please don't use the `onLoad` attribute. Attach an event listener. – John Dvorak Nov 15 '12 at 10:46
the last line only will call the loopImages once. This should work fine. It is not a setInterval – Ravi Sankar Raju Nov 15 '12 at 10:47
@littlecegian once, but immediately, and, as you said, it's recursive. – John Dvorak Nov 15 '12 at 10:47
recursive thing is probably bad. But i guess the code meets the intent, maybe not in the standards. Thanks for the comments – Ravi Sankar Raju Nov 15 '12 at 10:49
@littlecegian: calling loopImages will set up a timeout to call loopImages again, which will set up a timeout to call loopImages again, which will set up a timeout to call loopImages again, which will set up a timeout to call loopImages again... – Douglas Nov 15 '12 at 10:49
1

Using `setInterval (loopImages,0)` would be even worse. Not only it would grind the browser to a halt, it would also explode the browser's memory (or run out of handles). – John Dvorak Nov 15 '12 at 10:50
Not that it doesn't explode the browser's memory as it is now ;-) – John Dvorak Nov 15 '12 at 11:03

Javascript + timer

4 Answers4