CODEWITHSUNDEEP
jqueryfunctiontimeoutmouseovermouseleave
Davide
Davide

Reputation: 127

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>

Upvotes: 0

Views: 637

Answers (2)

guest271314
guest271314

Reputation: 1

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>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

The problem is that var tid makes that variable local inside the mouseover handler function only.

It is therefore not accessible in the mouseleave due to javascript scopes.

Effectively you are doing clearTimeout(undefined);

Upvotes: 0

Related Questions