1

Eu tenho o seguinte código

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);
});

No código acima mostrado, a variável inter é suposto ser um loop que para quando o cursor entre na div. Quando recarrego a página, o loop começa bem, quando passo o cursor por cima, para como deve ser, quanto removo o cursor da div, ele começa mas depois se passar de novo, ele não para e se retirar de novo, 2 loops começam ao mesmo tempo.

O slideshow foi baseado neste aqui

4
  • 2
    É porque você está redeclarando a variável inter em mouseleave Commented 19/12/2017 às 17:22
  • E então como é que eu dou começo à variável inter de novo? Commented 19/12/2017 às 17:25
  • Tente dessa forma: $(".mySlides").mouseleave(function(){ inter = setInterval(function(){ plusDivs(1); }, 2500); console.log(inter); }); sem o var Commented 19/12/2017 às 17:26
  • @ValdeirPsr Ou seja, removo o var... Sinto-me mal por ser um erro tão pequeno ¯\_(ツ)_/¯, publique a resposta e eu aceitarei. Commented 19/12/2017 às 17:28

2 Respostas 2

2

O erro está acontecendo pois você está redeclarando a variável inter.

Quando você define uma variável fora do escopo da função var inter = 0, ela é global, podendo ser acessada através de qualquer outra função.

Quando você define uma variável dentro do escopo da função, ela passa a ser local, não podendo ser acessada fora da função.

// Global
var global = 0;

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

O correto é dessa forma:

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

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

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

No seu caso, a melhor maneira de evitar esse erro, é utilizar função para sempre atribuir um valor a essa variável. Isso o ajudará ao manter o código a médio/longo prazo.

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>

0

A variavel inter é global, não pode ser declarada novamente, apenas atribua o setinterval seria assim:

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);
});
2
  • Poderia adicionar um exemplo funcional da correção nessa resposta?
    – GIA
    Commented 19/12/2017 às 17:43
  • Editado na resposta Commented 21/12/2017 às 14:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .