Javascript js/jQuery-按鼠标位置退出函数

我有一个递归函数，用于一种图像滑块

function nextCol(col) {
  $('.menubox_col').fadeOut();
  $('.menubox_col').eq(col).fadeIn(function(){
    col++;  
    if (col > 3) col = 0;
    setTimeout(function(){ nextCol(col) }, 1000);  
  });
}

<div id="menubox">      
        <div class="menubox_col">content</div>
        <div class="menubox_col">content</div>
        <div class="menubox_col">content</div>
        <div class="menubox_col">content</div>
</div>

功能nextCol（col）{
$（'.menubox_col'）.fadeOut（）；
$（'.menubox_col'）.eq（col）.fadeIn（function（）{
col++；
如果（col>3）col=0；
setTimeout（函数（）{nextCol（col）}，1000）；
});
}
内容
内容
内容
内容

---

这很好，但是当鼠标光标进入#menubox div时，我发现没有办法停止递归函数。

您可以使用以下方法清除超时：

---

虽然您可以使用clearTimeout，然后再次重新启动动画，但您只需设置一个标志，这意味着您不需要停止和启动计时器。。。这将在鼠标位于菜单框上时停止动画，并在离开时继续动画。我还大胆地做了一些小的代码更改——我发现结果要简单得多：

$(function(){

  var col = 0, hover = false;

  function nextCol() {
    if(hover){return;} // if their mouse is over, do nothing
    col = (col+1) % 4; // make this a one-liner. the 4 probably shouldn't be hard-coded though, it could be $('.menubox_col').length
    $('.menubox_col').fadeOut().eq(col).fadeIn();
  }

  setInterval(nextCol, 1000);

  $('#menubox').hover(function(){ hover=true; }, function(){ hover=false; });

});

---

这是我的第一个想法，但没有成功。在您的帖子之后，我再次尝试，将整个代码放在$（document）.ready（）部分。现在它开始工作了-非常感谢你，达林！

$(function(){

  var col = 0, hover = false;

  function nextCol() {
    if(hover){return;} // if their mouse is over, do nothing
    col = (col+1) % 4; // make this a one-liner. the 4 probably shouldn't be hard-coded though, it could be $('.menubox_col').length
    $('.menubox_col').fadeOut().eq(col).fadeIn();
  }

  setInterval(nextCol, 1000);

  $('#menubox').hover(function(){ hover=true; }, function(){ hover=false; });

});