Problems with setInterval()

Question

I have the following code

var inter = setInterval(function(){
  plusDivs(1);
}, 2500);
$(".mySlides").mouseenter(function(){
  clearInterval(inter);
});
$(".mySlides").mouseleave(function(){
  var inter = setInterval(function(){
    plusDivs(1);
  }, 2500);
  console.log(inter);
});

In the code shown above, the variable inter is supposed to be a loop that stops when the cursor enters the div. When I reload the page, the loop starts fine, when I pass the cursor over it, for how it should be, when I remove the cursor from the div, it starts but then it passes again, it does not stop and withdraw again, 2 loops start at the same time.

The slideshow was based in this one

Answer 1

The error is happening because you are redeclareting the variable inter.

When you define a variable outside the function scope var inter = 0, it is global and can be accessed through any other function.

When you define a variable within the scope of the function, it becomes local and cannot be accessed outside the function.

// Global
var global = 0;

function myFunc() {
    // Local
    var local = 0;
}

That’s the way it is:

var inter = setInterval(function(){
  plusDivs(1);
}, 2500);

$(".mySlides").mouseenter(function(){
  clearInterval(inter);
});

$(".mySlides").mouseleave(function(){
  inter = setInterval(function(){
    plusDivs(1);
  }, 2500);
  console.log(inter);
});

In your case, the best way to avoid this error is to use function to always assign a value to this variable. This will help you keep the code medium/long-term.

var inter = setInterval(function(){
  //plusDivs(1);
  $("#log").text("Loop running...")
}, 2500);

$(".mySlides").mouseenter(function(){
  clearInterval(inter);
  $("#log").text("Loop stoped.")
});

$(".mySlides").mouseleave(function(){
  inter = setInterval(function(){
    //plusDivs(1);
    $("#log").text("Loop running again...")
  }, 2500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mySlides">.mySlides</div>
<div id="log"></div>

Answer 2

The inter variable is global, cannot be declared again, just set interval would be like this:

var inter = setInterval(function(){
  plusDivs(1);
}, 2500);
$(".mySlides").mouseenter(function(){
  clearInterval(inter);
});
$(".mySlides").mouseleave(function(){
  inter = setInterval(function(){ // aqui não se define novamente a variavel inter
    plusDivs(1);
  }, 2500);
  console.log(inter);
});