finaliza una función setTimeout antes de su hora configurada

Question

tengo una función jquery que al hacer clic produce un tiempo de espera establecido al hacer visible un div.

Sin embargo, si se selecciona otra opción durante la duración del tiempo de ajuste, me gustaría saber cómo destruir esta función y agachar cualquier otra cosa que ocurra.

mi código actual es:

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

}); 

}); 

un poco engorroso, pero funciona hasta que esto se hace clic en:

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

}); 

si el segundo se hace clic justo después de la primera de 'act' clase todavía aparece en li # cv después del tiempo establecido.

¿Tiene esto sentido !!!! ????

Espero que sí!

Answer 1

La función setTimeout devuelve un identificador a ese tiempo de espera. A continuación, puede cancelar ese tiempo de espera con la función clearTimeout. Así que usted puede hacer algo como esto (llene los espacios en blanco con su código):

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

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

Sin embargo, no es particularmente muy limpio para mantener una variable global para esto,. Puede almacenar el temporizador en el atributo data de cualquier elemento que tenga más sentido para su situación. Algo como esto:

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

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

Realmente no aspecto más limpio, pero es una forma alternativa para almacenar el temporizador ...

Answer 2

Usted puede utilizar clearTimeout() de hacer eso. Necesitará mantener el valor devuelto desde setTimeout() en una variable para pasar al clearTimeout().