CODEWITHSUNDEEP
javascriptjqueryfunctioncallback
MillerMedia
MillerMedia

Reputation: 3671

Looping Function (Javascript Callback Help)

I haven't done much with Javascript functions and am trying to get a function to loop itself after a short delay. I've seem some code using setTimeout() but I can't seem to figure out how to get it to work in my instance, here's my code:

var number = 8;
var iter = 1;

function slide_function(iter, amount, callback){    
    if(iter<amount){
        console.log('test');

        $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){         
            $(this).next('span').fadeIn();      
        });

        var iter = iter + 1;
    }
    else if(iter==amount){
        console.log('test2');

        var iter = 1;

        $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){         
            $(this).next('span').fadeIn();      
        });

        var iter = iter + 1;
    }
}

slide_function(iter, number, setTimeout(slide_function(iter, number),5000));

I'm trying to basically create a little slideshow type thing where elements fade in and out up to a certain point and then start over again. It works the first time through the function but then doesn't run it again. I did make some mistakes where it caused an infinite loop where it pretty much crashed my browser so I'm treading lightly at this point.

I'm assuming the issue lies in my callback function? I'm trying to do a 5000 ms delay before the function runs again.

Any help would be greatly appreciated. Thanks!

Upvotes: 0

Views: 119

Answers (3)

Sirikon
Sirikon

Reputation: 426

This maybe works for you, add this at the end replacing the last line:

setInterval(function(){
  slide_function(iter,number)
},5000);

And remove the callback argument in slide_function.

EDIT: Checkout the John T's comment below

Upvotes: 2

Ruan Mendes
Ruan Mendes

Reputation: 92274

Sirikon's answer works, an alternative is to chain your calls from within slide_function, also, this code avoid globals. Not tested, so it probably has a few bugs.

function slideShow(iter, amout) {
  function slide_function(){
      // Using mod operations is the common way to handle looping around the end
      iter = iter % amount;
      $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){         
          $(this).next('span').fadeIn();      
      });
      // You were using var, so you were creating a new variable instead 
      // of modifying the shared variable
      iter++;
  }

  setTimeout(slideShow, 5000);
}
slideShow(0,8);

Upvotes: 0

John T
John T

Reputation: 97

I suggest that you do setTimeout after the fadeIn has completed. Otherwise you will run into issues of trying to fadein and fadeout at the same time if your delay is shorter than your fadeIn.

Try rearranging your code to be like this:

// starts at 1, ends at 8
slide_function(1, 8);

function slide_function(iter, amount) {

    // defines a function called runAgain inside slide_function()
    var runAgain = function() {
        // setTimeout takes in a function as the first parameter and delay as the second one
        setTimeout(function() {
            // inside the function, run slide function with an incremented iter
            slide_function(iter+1, amount);
        }, 5000);
    }

    if(iter<amount){
        console.log('test');
        $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){         
            $(this).next('span').fadeIn(runAgain);      
        });

    }
    else if(iter==amount){
        console.log('reached the limit, resetting iter to 1');
        iter = 1;
        $('#tagline_slideshow span#' + iter).delay(delayTime).fadeOut(1600, function(){         
            $(this).next('span').fadeIn(runAgain);      
        });

    }
}

Upvotes: 0

Related Questions