hamahama
hamahama

Reputation: 393

setTimeout First Delay does not take Effect

setTimeout doesn't work as expected because it will execute the codes below subsequently without waiting for the delay to run the first argument of 'setTimeout'

(function() {
    var a = ['#bird','#flower','#cat'];
    var totalno = settings.imageArray.length;
    function rotateImages(start) {
        var nextImage = start + 1;
        if(nextImage % totalno == 0){
        nextImage=0;
        }

        //do animate here
        $(settings.imageArray).fadeOut();

        window.setTimeout(function() {
            rotateImages(++start % totalno);
        }, settings.imageArray[start].delay);
    }
    rotateImages(0);
})();

Is there a way to write it so that it doesnt fade out right away for the first image?

a simplified version would be :

(function() {
    var a = ['#bird','#flower','#cat'];

    function rotateImages(start) {
             //do something here

        window.setTimeout(function() {
            rotateImages(++start % a.length;);
        }, 1000);
    }
    rotateImages(0);
})();

Upvotes: 0

Views: 568

Answers (1)

Andomar
Andomar

Reputation: 238296

it will execute the codes below subsequently without waiting for the delay to run the first argument of 'setTimeout'

It looks like you're starting the first rotate directly. Instead of:

rotateImages(0);

Try to start the first rotate with a delay, like:

window.setTimeout(function() {
        rotateImages(0);
    }, settings.imageArray[0].delay);

Upvotes: 1

Related Questions