鼠标离开时停止超时 jQuery

Question

我正在尝试在鼠标悬停在跨度上时使用计时器启动函数，当鼠标离开跨度时函数计时器停止。

我的问题是计时器没有停止。

哪里出错了？

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

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

Answer 1

尝试在 .mouseover 之外声明 tid 和 loop 函数，使用 .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>

Answer 2

问题是 var tid 使该变量仅在 mouseover 处理程序函数内成为局部变量。

由于 javascript 个范围，因此无法在 mouseleave 中访问。

实际上你在做 clearTimeout(undefined);

鼠标离开时停止超时 jQuery

Stop timeout on mouse leave jQuery

jquery

function

timeout

mouseover

mouseleave