单击(jQuery）时暂停setTimeout

我有一个jQuery脚本在几个div中滑动。代码如下。我有两个问题需要解决：

1. 当用户单击选项卡时重置或添加计时器。此时，它可能会立即切换到下一张幻灯片，具体取决于它在循环中的位置。

2. 当用户将鼠标悬停在特定幻灯片上时，暂停计时器（即清除超时，然后重新启动）。

为了实现这些，我给setTimeout一个变量（$Timeout），并尝试清除Timeout，然后再次运行show_cycle_elem（）。无论我尝试了多少种不同的方法（将我的其他事件，如点击，放入函数中，然后在setTimeout后立即调用它们，等等），它似乎都不能完全正常工作。

有什么想法吗？

$(document).ready( function(){
var theId = 0;
function navClass(it){
    $('#hero nav a').removeClass('over');
    $(it).addClass('over');
}
$.fn.cycle = function(timeout){
    var $all_elem = $(this);
    show_cycle_elem = function(){
        if(theId == $all_elem.length) theId = 0;
        $all_elem.hide().eq(theId).fadeIn();
        navClass('#a' + theId);
        var $theTimeout = setTimeout(function(){show_cycle_elem(++theId)}, timeout);
    }
    show_cycle_elem();
}
$('div.hero_slide').cycle(10000);
$('#hero nav a').click( function(party){
    party.preventDefault();
    theId = this.id.substr(1);
    navClass($(this));
    $('.hero_slide').hide();
    $('#hero' + theId).fadeIn();
});
});

谢谢。