2010-12-01 28 views
7

Estoy trabajando en las pestañas ui creadas usando jQuery. Todo funciona, excepto por un problema: hice un setInterval que ejecuta una función que hace un disparador ("clic") para que pase a la siguiente pestaña después de 5000 milisegundos. Se ejecuta a través de cada pestaña fina, el problema es que si el usuario hace clic manualmente en una pestaña, el temporizador de setInterval no se reinicia en 0. Por ejemplo, si un usuario comenzara en tab1 a 0 milisegundos y haga clic en tab2 en 2000 milisegundos, el setInterval no vuelve a 0, comenzaría en 2000 y se ejecutaría a 5000 milisegundos y posteriormente iría a tab3. Entiendo por qué está sucediendo, solo me pregunto si hubo una manera de reiniciar la sincronización de setInterval sin tener que hacer un clearInterval() y crear un setInterval() completamente nuevo. Cualquier idea sería apreciada.Reiniciar un setInterval() en Javascript/jQuery (sin clearInterval)

actualización

Gracias por las respuestas - La razón por la que estaba tratando de evitar el uso de clearInterval era porque estaba teniendo problemas de la forma de escribir el código de una manera en la clearInterval detendría el setInterval por completo. El código está configurado para rastrear cada vez que un usuario ha hecho clic en una pestaña. El problema es que la función de cambio automático utiliza el disparador ('clic'), por lo que ejecuta la función clearInterval que escribí también cuando las pestañas se cambian automáticamente. Parece funcionar bastante bien por sí mismo, pero una vez que el usuario comienza a hacer clic en las pestañas, el setInterval se comporta de manera inusual y cambia las pestañas de forma impredecible. Sospecho que lo que está sucediendo es que varios setIntervals se están ejecutando a la vez ... Aquí está el código (si no lo has adivinado ya, soy bastante nuevo en javascript/jquery). He comentado partes para que sea funcional, pero todavía no funciona como pretendía (desde la primera publicación).

// auto change tabs 
      if(options.interval) { 

       function timerCom() { 
        if(!$(".controller").hasClass('paused')) { 
         var i = $(".tab-current > a").attr("rel"); 
         //alert(i); 
         if(i == 3) {i = 0}; 
         $container 
          .find('a') 
          .eq(i) 
          .trigger('click'); 
        }  
       } 

       //$("#promo-items > li > a").click(function() { 
        //var timer; 
        //if(timer != null) {clearInterval(timer);} 
        timer = setInterval(timerCom, options.interval); 

       //}); 

      } 
+0

¡Bienvenido a SO!Por favor, solo edite su pregunta si necesita proporcionar información adicional. Use comentarios para preguntas específicas sobre respuestas. SO no es un foro, el campo de respuesta está estrictamente reservado para las respuestas a la pregunta. –

Respuesta

8

No, no hay manera de reiniciar un temporizador establecido por setInterval sin borrar el temporizador.

3

No se pueden modificar los intervalos o los tiempos de espera, solo límpielos. Dicho esto, debería ser una tarea simple crear una función que borre el intervalo, y luego inicie una nueva pero idéntica inmediatamente con un nuevo valor de tiempo.

var intervalID; 
var resetTimer = function() { 
    if (intervalID) { clearInterval(intervalID) }; 
    intervalID = setInterval(function() { 
    console.log('doing stuff!'); 
    }, 5000); 
}; 
+5

esa forma de usar llaves hace que el código sea casi ilegible: P. Los apoyos deben estar en sus propias líneas –

+2

No tengo ningún interés en el debate, pero de hecho, el estándar de codificación de Google dice "Debido a la inserción implícita de punto y coma, siempre encienda las llaves en la misma línea que lo que estén abriendo. " http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml – DaveWalley

1
timer = setInterval(function() { 
    timerCom(); 
}, options.interval); 
0

Sé que este post es así más de 2 años de edad, pero me encontré con un problema similar hace un momento, y he encontrado una solución.

Estaba escribiendo un desplazamiento de imagen que se desplazará automáticamente a la siguiente imagen después de un período de tiempo determinado, y cada vez que hago clic en los botones de navegación, las transiciones se mueven dos veces.

aquí está mi solución:

que la variable de intervalo (timer en su caso) un tanto global.

es decir, en la sección options (suponiendo que se haya definido anteriormente, y luego se le haya asignado), agregue una variable timer nula.

var options = { 
'interval', 
//Other variables 
'timer', 
}; 

Luego, llame al clearInterval dos veces cuando maneja el evento click.

$("#promo-items > li > a").click(function() { 

if(options.timer != null) { 
clearInterval(options.timer); 
clearInterval(options.timer); 
} 

options.timer = setInterval(timerCom, options.interval); 

}); 

Funcionó como un encanto para mí.

Nuevamente, lo siento si esto es demasiado tarde.

Cuestiones relacionadas