Question

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);
})();

Answer 1

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