javascript - 在设定时间之前结束 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');
        }
    });
});

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