Search code examples
jqueryfunctiontimeoutmouseovermouseleave

Stop timeout on mouse leave jQuery

I'm trying to start a function with timer when mouse is over the span and when it leaves the span the function timer stops.

My problem is that the timer doesn't stop.

Where is the error?

<script>
$("#first").mouseover(function() {
  var tid = setTimeout(loop, 1500); 

  function loop(){
//code
    tid = setTimeout(loop, 1500);
  }
});
$("#first").mouseleave(function(){
  clearTimeout(tid);
});
</script>
Solution

  • Try declaring tid , loop function outside of .mouseover , using .one()

    <!doctype html>
<html>
<head>
<style>
body {
	background-color: black;
}

#min img {
	border: 1px solid black;
}

#miniatura{
	height:290px;

	position:relative;
}
#min{
	height:243px;
	width:310px;
	text-align:center;
}

#min img{
	border:1px solid #646464;
}
.title_bg{
	margin-left:1px;
}
/*
AGGIUNTO
*/
ul.vid-rotater li {
	color: white;
}


/*
FINE
*/
.frame {
	display:block;
	height:243px;
	float:left;
	width:310px;
	z-index:3;
/*	background: url("no_image.gif"); */
}
.frame img{
	border: 1px solid #FFFFFF;
}


.pic {
	clear:both;
	cursor:pointer;
	display:block;
	float:left;
	height:243px;
	position:relative;
	width:310px;
}
.pic .frame {
	left:0px;
	position:absolute;
	top:0px;
}

.pic img {

	height:232px;
	left:1px;
	position:absolute;
	top:10px;
	width:308px;
	z-index:2;
}
.pic:hover {
	text-decoration:none;
}

.vid-rotater {
	position:absolute;
	visibility:visible; /*hidden*/
	margin:0 0 0 25px;
	padding:3px 5px 5px;
	left: 0px;
}
.vid-rotater li, .vid-rotater a {
	display:block;
	float:left;
	width:29px;
}
.vid-rotater li {
	margin:0 0 0 2px;
	padding:0;
}
.vid-rotater a {
	overflow:hidden;
	padding:4px 0 3px;
}
.vid-rotater span {
	background:#FFFFFF none repeat scroll 0 0;
	border-bottom:1px solid #333333;
	border-right:1px solid #333333;
	display:block;
	height:3px;
	line-height:999em;
	overflow:hidden;
}
.vid-rotater .active span {
	background:#CC3366 none repeat scroll 0 0;
	border-color:#660033;
	cursor:pointer;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
    
    var tid = 0;
    var first = 0;
    $c = 0;

    function loop(){
      if (first == 0){
        $immagine = $(".lazy");
        first = 1;
      }
        $(".active").next().attr("class", "active");
        $(".active").prev().attr("class", "");

        $immagine.next().attr("style", "vivibility: visible;");
        $immagine.prev().attr("style", "visibility: hidden;");
        $c++;
        if($c > 7){
          $c=0;

          $(".active").prev().prev().prev().prev().prev().prev().prev().attr("class", "active");
          $(".active").next().next().next().next().next().next().next().attr("class", "");

          $immagine.attr("style", "visibility: hidden;");
          $immagine = $(".lazy");
          $immagine.attr("style", "visibility: visible;");
        }else{
          $immagine = $immagine.next();
        }
          tid = setTimeout(loop, 1500);
    }

    function handleMouseOver() {
      tid = setTimeout(loop, 1500);
    }

    $("#first")
    .one("mouseover", handleMouseOver)
    .on("mouseleave", function(){
      clearTimeout(tid);
      $(this).one("mouseover", handleMouseOver)
    });
})
</script>
</head>
<body>
<span id="first">
  <span id="min" class="pic">
    <ul class="vid-rotater" style="visibility: visible;">
           <li class="active"><span>0</span></li>
           <li class=""><span>1</span></li>
           <li class=""><span>2</span></li>
           <li class=""><span>3</span></li>
           <li class=""><span>4</span></li>
           <li class=""><span>5</span></li>
           <li class=""><span>6</span></li>
           <li class=""><span>7</span></li>
    </ul>
    <a class="frame" href="http://www.cycling.it/" target="_self" style="text-decoration: none;"></a>

    <img class="lazy" src="http://www.cycling.it/foto_gallery/big/01-revelator_prestige_Di2_7805.jpg" data-original="" style="display: block; visibility: visible;">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9ty91M-QHPrgy6woAJAgdF68UrTD8c91WXz5dfznU1R_2GQ5Qjw" style="visibility: hidden;">
    <img src="https://eradellabicicletta.files.wordpress.com/2013/01/bici-da-corsa-rb1000-team-edition.jpg" style="visibility: hidden;">
    <img src="http://www.bicielettriche.bikeitalia.it/wp-content/uploads/2014/11/bici-elettrica-piaggio.png" style="visibility: hidden;">
    <img src="http://www.loriscycles.com/docs/gallery/2/bici_sx_101.png" style="visibility: hidden;">
    <img src="http://www.bikeitalia.it/wp-content/uploads/2014/04/bici-da-corsa-da-donna-stella-wilier.jpg" style="visibility: hidden;">
    <img src="http://www.wildpigs.it/wp-content/uploads/2012/08/status.jpg" style="visibility: hidden;">
    <img src="http://www.milkywayshop.it/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/b/i/bici-fixed-margot-cycling-margot-dragonfly-12165.jpg" style="visibility: hidden;">


  </span>
</span>
</body>
</html>