CODEWITHSUNDEEP
javascriptjquerysetinterval
Sebsemillia
Sebsemillia

Reputation: 9476

jQuery waiting until first interval

I have this little jquery code where I want the content of an array smoothly fadein and out with a certain delay and at the end restart with the first array item again.

It works fine, but unfortunately at the beginning the function waits 5000ms interval before it starts showing the first entry. I would like to start immediately. Does anyone know I can achieve that?

Here is my code:

$('.wissenswertes').append('<div class="content"></div>');
var wissenArray = [0, 1, 2, 3];
itemNr = wissenArray.length;

function loopWissen() {
    var i = 0;
    setInterval(function () {
        $('.wissenswertes .content').text(wissenArray[i]).fadeIn(1000).delay(3000).fadeOut(1000);
        i++;
        if (i == itemNr) {
            i = 0;
        }
    }, 5000);
}
$(loopWissen);

and a Fiddle.

btw: if you have any recommendations on general code improvement, you are more than welcome to let me know! Thank you.

Upvotes: 1

Views: 127

Answers (4)

azz
azz

Reputation: 5930

Personally I would clean it up a little bit:

function loopWissen() {
    var array = [0, 1, 2, 3];
    (function next(i, a, l) { 
        $('.wissenswertes .content')
             .text(a[i])
             .fadeIn(1000).delay(3000).fadeOut(1000, function () {
                next(++i % l, a, l);
        });
    })(0, array, array.length);
}

Upvotes: 0

Blue Skies
Blue Skies

Reputation: 2975

Don't use setInterval for this. It's fragile because you're relying on the interval being consistently aligned with the other timed code.

I would just make a call to the function after the fadeOut(1000).

$('.wissenswertes').append('<div class="content"></div>');

var wissenArray = [0, 1, 2, 3];

function loopWissen() {
    var i = 0;
    (function loop() {
        $('.wissenswertes .content').text(wissenArray[i])
                                    .fadeIn(1000)
                                    .delay(3000) //  v---next loop after fadeOut
                                    .fadeOut(1000, loop);
        i = ++i % wissenArray.length;
    }());
}

$(loopWissen);

I also shortened your i incrementing code. Your way was absolutely fine, but this is just a little more concise.

Also removed the itemNr because getting the .length is very cheap.

Upvotes: 3

Henry Florence
Henry Florence

Reputation: 2866

Something like this:

$('.wissenswertes').append('<div class="content"></div>');
var wissenArray = [0,1,2,3];
var itemNr = wissenArray.length;
var i = 0;

function loopWissen() { 
   $('.wissenswertes .content').text(wissenArray[i]).fadeIn(1000).delay(3000).fadeOut(1000);
   i++;
   if(i == itemNr) {
       i = 0;
   }
}
setInterval(loopWissen, 5000);
loopWissen();

Upvotes: 0

Ibu
Ibu

Reputation: 43810

You can define the function first instead of using an anonymous function, then call it right away:

function loopWissen() {
    var i = 0;
    var fn = function() { 
        $('.wissenswertes .content').text(wissenArray[i]).fadeIn(1000).delay(3000).fadeOut(1000);
        i++;
        if(i == itemNr) {
            i = 0;
        }
    };
    fn(); // calls it immediately 
    setInterval(fn, 5000);
}

Upvotes: 1

Related Questions