завершить функцию setTimeout до установленного времени

Question

У меня есть функция jquery, которая при нажатии производит установленное время ожидания для отображения div.

однако, если в течение заданного времени ожидания выбрана другая опция, я хотел бы знать, как уничтожить эту функцию и прекратить что-либо еще в ней происходящее.

мой текущий код:

$(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().