Question

I have a function that runs a loop using setInterval. The function empMove decreases the margin-top by -182px each time. I have another if statement within this to check when it needs to end. In here I use clearInterval to stop the loop, and I set the margin-top back to zero.

The problem is that it stops but does not restart again.

Sorry I didn’t paste the entire code but that would be huge and distract from the focus of the issue.

// if statements to move carousel up
$carouselNum = $('.carousella').length;

$loopNum = $($carouselNum * -182);

if($carouselNum  > 1){

    // function empMove, the '-=' allows the -margin-top to run every time. Without this it will set the margin-top to the same value every loop
    var myLoop = setInterval(empMove, 2500);
    function empMove() {
        $('.emp-wrap').css('margin-top', '-=182');
        console.log('loop start');
        var marginTop = $('.emp-wrap').css('margin-top');
        console.log(marginTop);
        if(marginTop = $loopNum){
            // do something
            clearInterval(myLoop);
            $('.emp-wrap').delay(2500).css('margin-top', '0');
            console.log('loop stops');
            };
    };    

}
else{
    // do something
}

Answer 1

You need to call setInterval again.

myLoop = setInterval(empMove, 2500);

Since, clearInterval will destroy it.

Technically, you could do it after setting the margin-top back to 0.

clearInterval(myLoop);
$('.emp-wrap').delay(2500).queue(function(next){
  $('.emp-wrap').css('margin-top', '0');
  myLoop = setInterval(empMove, 2500);
  next();
});

But, it will be cleaner if you modify empMove to either decrease the margin or reset it to 0 depending of the if statement.

var $empwrap = $('.emp-wrap');
var myLoop = setInterval(function() {
  var marginTop = $empwrap.css('margin-top');
  if (marginTop >= loopNum) {
    $empwrap.css('margin-top', '0');
  } else {
    $empwrap.css('margin-top', '-=182');
  }
}, 2500);

Disclaimer: untested.