0

我有一个函数可以遍历表中的行，以便在任何给定时间只显示一个。

我想对此进行扩展，以便当我将鼠标悬停在表格上时，它会显示所有行，然后当我离开时，它会恢复一次显示一行。

我遇到的问题是，在悬停时，第一个功能继续运行，有没有办法“暂停”该功能。我查看了使用 ClearInterval() 的各种示例，但无法将它们与我的脚本匹配。

//Calling The function that loops through the rows    
function hideShow(time)
{   
    setInterval('showRows()',time); 
};      

//Set the time between each 'loop' and start looping 
$(document).ready(function()
{
    hideShow(2000);
}   
);

//The hover function to show / hide all the rows
$(document).ready(function()
{
    $('#dbTable1 tr').hover(function() 
        {
            $('.Group td').removeClass('RoundBottom');
            $('.Group').show();
        },  
        function()
        {
            $('.Group td').addClass('RoundBottom');
            $('.Group').hide();
        }
    ); 
}
);

谁能告诉我如何将两者结合起来？

4

2 回答 2

1

您需要在调用时跟踪计时器 ID setInterval：

var timerID;

function hideShow(time){
  timerID = setInterval(showRows, time);
}

然后稍后当您想停止重复时，调用clearInterval并传入该 ID：

// ...
  $('.Group td').removeClass('RoundBottom');
  $('.Group').show();
  clearInterval(timerID);
},
function()
{
  hideShow(2000);
  $('.Group td').addClass('RoundBottom');
  // ...
于 2012-07-19T16:27:23.493 回答
0

您可以在执行任何其他操作之前检查悬停状态，如下所示：

function showRows() {
    if (isHovering) {
        return;
    }

    // ...
}

该isHovering变量只是一个具有当前悬停状态的布尔值，可以由您的回调函数设置。

使用上述方法，您可以只设置一次计时器并忘记它。

于 2012-07-19T17:44:59.937 回答