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
– John Dvorak

2012-11-15 10:30:07 +00:00
Commented Nov 15, 2012 at 10:30 — John Dvorak
– John Dvorak, Commented Nov 15, 2012 at 10:30

Esailija · Accepted Answer · 2012-11-15 10:41:12Z

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, 2012 at 10:41

answered Nov 15, 2012 at 10:29

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

13 Comments

Talha Ahmed Khan Over a year ago

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.

user1726343 Over a year ago

Why are you making the function return itself?

Esailija Over a year ago

@Asad I guess I'm being overly clever, I'll edit it to be more friendly

user1726343 Over a year ago

@Esailija It just seems somewhat redundant, if you remove the return and the invocation brackets you get identical results.

Esailija Over a year ago

@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

|

user1726343 · Accepted Answer · 2012-11-15 10:54:38Z

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, 2012 at 10:54

user1726343

4 Comments

John Dvorak Over a year ago

Note: the only difference between this and the other answer is the use of setTimeout instead of setInterval to do the same loop.

user1726343 Over a year ago

@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.

user1726343 Over a year ago

@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.

John Dvorak Over a year ago

Good point - but then you should also attach an error handler on the image in case it doesn't load ;-)

Community · Accepted Answer · 2017-05-23 12:27:44Z

-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, 2017 at 12:27

CommunityBot

11 silver badge

answered Nov 15, 2012 at 10:36

Hasanavi

8,6352 gold badges32 silver badges36 bronze badges

1 Comment

John Dvorak Over a year ago

This question being a duplicate should be a comment.

Ravi Sankar Raju · Accepted Answer · 2012-11-15 10:42:20Z

-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, 2012 at 10:42

Ravi Sankar Raju

2,9683 gold badges20 silver badges17 bronze badges

8 Comments

Douglas Over a year ago

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: jslint.com/lint.html#evil

John Dvorak Over a year ago

Also, please don't use the onLoad attribute. Attach an event listener.

Ravi Sankar Raju Over a year ago

the last line only will call the loopImages once. This should work fine. It is not a setInterval

John Dvorak Over a year ago

@littlecegian once, but immediately, and, as you said, it's recursive.

John Dvorak Over a year ago

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).

|

Collectives™ on Stack Overflow

Javascript + timer

4 Answers 4

13 Comments

4 Comments

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

13 Comments

4 Comments

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related