鼠标离开jQuery时停止超时

时间:2016-01-17 19:48:40

标签: jquery function timeout mouseover mouseleave

我试图在鼠标位于跨度上时使用计时器启动一个功能,当它离开跨度时,功能计时器停止。

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

错误在哪里?

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

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

2 个答案:

答案 0 :(得分:1)

尝试使用tid

loop之外声明.mouseover.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>

答案 1 :(得分:0)

问题是Sub ERCACMPCleanup() 'Cleans ERCA_CMP Worksheet and creates extra records for comma delimited Dim X As Long, LastRow As Long, A As Range, Table As Range, Data() As String Dim flgval As Boolean, rcntr As Integer, ccntr As Integer, rownum As Integer Const Delimiter As String = ", " Const DelimitedColumn As String = "A" Const TableColumns As String = "A:O" Const StartRow As Long = 2 Application.ScreenUpdating = False ActiveWorkbook.Worksheets("ERCA_CMP").Visible = True ActiveWorkbook.Worksheets("ERCA_CMP").Activate LastRow = Columns(TableColumns).Find(What:="*", SearchOrder:=xlRows, _ SearchDirection:=xlPrevious, LookIn:=xlFormulas).Row For X = LastRow To StartRow Step -1 Data = Split(Cells(X, DelimitedColumn), Delimiter) If UBound(Data) > 0 Then Intersect(Rows(X + 1), Columns(TableColumns)).Resize(UBound(Data)).Insert xlShiftDown End If If Len(Cells(X, DelimitedColumn)) Then Cells(X, DelimitedColumn).Resize(UBound(Data) + 1) = WorksheetFunction.Transpose(Data) End If Next 'Modification Start for the question 'flgval turns true if cells B:O are not empty flgval = False Range("A1").Activate For rcntr = 0 To LastRow - 1 For ccntr = 1 To 14 If ActiveCell.Offset(0, ccntr).Value <> "" Then flgval = True Exit For End If Next If flgval = False Then For ccntr = 1 To 14 ActiveCell.Offset(0, ccntr).FormulaR1C1 = "=R[-1]C" Next Else flgval = False End If ActiveCell.Offset(1, 0).Activate Next '**LastRow = Cells(Rows.Count, DelimitedColumn).End(xlUp).Row 'On Error Resume Next 'Set Table = Intersect(Columns(TableColumns), Rows(StartRow).Resize(rownum - StartRow)) 'If Err.Number = 0 Then ' Table.SpecialCells(xlBlanks).FormulaR1C1 = "=R[-1]C" ' Columns(DelimitedColumn).SpecialCells(xlFormulas).Clear ' Table.Value = Table.Value 'End If 'On Error GoTo 0** Application.ScreenUpdating = True End Sub 仅在var tid处理函数内使该变量局部化。

由于javascript范围,因此mouseover无法访问它。

有效地你正在做mouseleave