Kończenie funkcji setTimeout przed ustawionym czasem

Question

Mam funkcję jquery, która po kliknięciu powoduje ustawienie limitu czasu dla uczynienia div widocznym.

Jeśli jednak inna opcja zostanie wybrana w trakcie długości rozliczania, chciałbym wiedzieć, jak zniszczyć tę funkcję i pochylić cokolwiek innego dzieje się.

mój bieżący kod jest:

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

}); 

}); 

nieco kłopotliwe, ale działa dopóki ta kliknięciu:

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

}); 

jeśli drugi kliknięciu tuż po pierwszym niż klasa „cur” nadal podchodzi na li # cv po ustawionym czasie.

Czy to ma sens !!!! ????

Mam nadzieję, że tak!

Answer 1

Funkcja setTimeout zwraca identyfikator do tego limitu czasu. Następnie można anulować ten limit czasu za pomocą funkcji clearTimeout. Więc można zrobić coś takiego (wypełnić puste pola z kodem):

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

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

To nie jest szczególnie super czyste, aby utrzymać zmienną globalną do tego jednak. Możesz przechowywać timer w atrybucie data dowolnego elementu, który ma największy sens w danej sytuacji. Coś takiego:

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

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

To naprawdę nie wyglądać czystsze, ale to alternatywny sposób na przechowywanie stoper ...

Answer 2

Można użyć clearTimeout() to zrobić. Musisz zachować wartość zwracaną z setTimeout() w zmiennej, aby przejść do clearTimeout().