Question

我有一个循环遍历表中行的函数，因此在任何给定时间只显示一个。

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

我遇到的问题是，在悬停时，第一个功能继续进行，有没有办法'暂停'功能。我已经使用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();
        }
    ); 
}
);

任何人都可以告诉我如何将两者结合起来吗？

Answer 1

您需要在致电setInterval时跟踪计时器ID：

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');
  // ...

Answer 2

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

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

    // ...
}

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

使用上述方法，您只需将计时器设置一次就可以忘掉它。

在javascript中暂停功能

2 个答案: