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');
        }
    });
});

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

Answer 2

您可以使用clearTimeout()来执行此操作。您需要将setTimeout()中的返回值保留在变量中以传递给clearTimeout()。

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

2 个答案: