在设置时间之前结束setTimeout函数

Question

我有一个jquery函数,当单击时产生一个设置超时使div可见.

但是,如果在settimeout长度期间选择了另一个选项,我想知道如何销毁此函数并弯曲其中发生的任何其他事情.

我目前的代码是:

$(document).ready(function(){

$('li#contact').click(function() {
        $('ul.image_display').css('display', 'none');
        $('ul.projects').fadeOut().hide();
        $('li#cv').removeClass('cur');
        $('li#projects').removeClass('cur');
        $('li#contact').addClass('cur');
        $('ul.contact').fadeIn(function()
                        {
                        setTimeout( function()
                        {
                        $('ul.contact').fadeOut('slow');
                        }, 8000);
                        });
        setTimeout(function() {
            $('li#contact').removeClass('cur');
            $('li#cv').addClass('cur');
            $('ul.projects').fadeIn('slow');
            $('ul.image_display').css('display', 'block');
            }, 8625);

});

}); 

有点麻烦,但在点击之前一直有效:

$(document).ready(function(){

$('#projects').click(function() {
        $('li#cv').removeClass('cur');
        $('ul.contact').fadeOut().hide();
        $('#contact').removeClass('cur');
        $('ul.projects').fadeIn('slow');
        $('#projects').addClass('cur');
        $('ul.image_display').css('display', 'block');
});

});

如果在第一个类之后点击第二个,那么'cur'仍然会在设定的时间之后出现在li#cv上.

这有道理!!!! ????

希望如此!

Answer 1

该setTimeout函数返回该超时的标识符.然后,您可以使用该clearTimeout功能取消该超时.所以你可以做这样的事情(用你的代码填空):

var timer;
$(function() {
    $(...).click(function() {
        ...
        timer = setTimeout(...);
        ...
    });

    $(...).click(function() {
        clearTimeout(timer);
    });
});

然而,为此保留一个全局变量并不是特别超级干净.您可以将计时器存储在data对您的情况最有意义的任何元素的属性中.像这样的东西:

$(function() {
    $(...).click(function() {
        ...
        var timer = setTimeout(...);
        $(someelement).data('activetimer', timer);
        ...
    });

    $(...).click(function() {
        var timer = $(someelement).data('activetimer');
        if(timer) {
            clearTimeout(timer);
            $(someelement).removeData('activetimer');
        }
    });
});

它看起来并不干净,但它是存储计时器的另一种方式......