Adraxas Nazaron Adraxas Nazaron - 9 months ago 50
Javascript Question

Repeating a function indefinitely, preferably without using setInterval()

I am building a slide show framework and was having trouble figuring out the best way to cycle the animation function, I know I could use

but was wondering if there was a better way to repeat it without being to resource intensive.


class slideShow {
constructor(imgDir, dataList) {
this.imgDir = imgDir;
this.dataList = dataList;
this.settings = 0;
this.imgList = 0;
$.getJSON(`${this.imgDir}/${this.dataList}.json`, (data)=>{
this.settings = data.settings;
this.imgList = data.imgList;
for(let img of this.imgList){
$(this.settings.selector).fadeOut(this.settings.fadeTime, ()=>{



Answer Source

A simple solution is to pseudo-recursively loop from the "completion callback" of the final step of the animation.

start() {
    var current = 0;
    (function loop() {
        let img = imgList[current++];
        current %= imgList.length;
        let $sel = $(this.settings.selector);
        $sel.fadeOut(this.settings.fadeTime, () => {
            $sel.fadeIn(this.settings.fadeTime, loop); // <-- here

Note that I've removed the for ... of loop - each pass of the loop function here just handles one frame of the slideshow.

This would resolve what appears to be a bug in your original code, where you'd get three consecutive fadeOut animations (two of which would of course be invisible) because nothing in your code allows for the first cycle of fadeOut, change image, fadeIn to complete before the next iteration of the for ... of loop starts.