Question

I have a loop that fades between images, with an interval set by the variable itemInterval. Like so:

            // interval between items
            var itemInterval = 5500;

            // start loop
            var infiniteLoop = setInterval(function() { 

                // initial fade out
                $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

                // set counter
                if (currentItem == numberOfItem -1) {
                    currentItem = 0;
                } else {
                    currentItem++;
                }

                // next item fade in
                $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);

What I would really like to do, if have an initial time interval that runs only the first time the loop is run, and then a second time interval that runs each time afterwards.

So when the user opens the page, the first cross-fade is quite quick, but then they wait longer for the next image to cross-fade.

I’m quite new to Javascript, so I’d really appreciate it if you could edit my code to make it work and let me know what you’ve done. if Thanks in advance for your time 🙂

Answer 1

You could try using a normal function instead of an anonymous one:

        // interval between items
        var itemInterval = 5500;
        var infiniteLoop;//this contains the id of the interval to be used in clearinterval by the way
        setTimeout(function(){
              // this code will run only once, one second after the page loads.
              myFunc();
              infiniteLoop = setInterval(myFunc, itemInterval);
              // commence loop that will run forever unless you use clearinterval(infiniteLoop);
        }, 1000);
        // start loop


        function myFunc() { 
            // this code will run every time the function is called
            // initial fade out
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            // set counter
            if (currentItem == numberOfItem -1) {
                currentItem = 0;
            } else {
                currentItem++;
            }

            // next item fade in
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }

This way, you could call this function manually, and then commence it’s interval.