Using SetTimeout and .each Jquery

Question

I want to use settimeout() function with .each function.Basically iwant to show each image for 5 seconds and then next but i am only able to see last image.The .each executes and do not stop for 3 seconds.How can i do this?This is how i am doing.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {

        $('#Images').find('li').each(function () {
            var img = this;
            setTimeout(function () {
                Start(img);
            }, 3000);

        });


    });
    function Start(img) {
        $('#slideshow').html(img);
    }
   </script>
   </head>
   <body>
   <form id="form1" runat="server">
<div id="slideshow">
</div>
<div style="display:none;">
<ul id="Images">
<li><img src="images/ajax-loader.gif" /></li>
<li><img src="images/Ajax Loader White.gif" /></li>
<li><img src="images/fancybox_sprite.png" /></li>
</ul>
</div>
</form>

have you tried the .delay() function? I'm thinking this will do what you need. The way you're doing it, each call to Start() will be within milliseconds of each other. api.jquery.com/delay — jeschafe
– jeschafe, Commented Jul 17, 2012 at 5:31

Arkadiusz 'flies' Rzadkowolski · Accepted Answer · 2012-07-17 05:31:01Z

1

Try this one:

    $('#Images').find('li').each(function (k,v) {
        var img = this;
        changeImg(img, k);
    });

    function changeImg(img, k) {
        setTimeout(function () {
            Start(img);
        }, 3000*(k+1));
    }

answered Jul 17, 2012 at 5:31

Arkadiusz 'flies' Rzadkowolski

5,8372 gold badges32 silver badges31 bronze badges

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

2 Comments

Mairaj Ahmad Over a year ago

Can you please explain what does this mean .each(function(k,v)

Arkadiusz 'flies' Rzadkowolski Over a year ago

k is the index from 0 to n-1, v is the value element (v is unneeded in this case)

Yograj Gupta · Accepted Answer · 2012-07-17 05:32:49Z

0

Try this

var images = $('#Images').find('li');
var imageCount = images.length;
var counter = 0;
setTimeout(function(){
Start(images[counter++]);
if(counter>=imageCount)
    counter =0 ;

},3000);

answered Jul 17, 2012 at 5:32

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

Collectives™ on Stack Overflow

Using SetTimeout and .each Jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related