2

$(function(){ 
   var i = 0;
   var myVar = setInterval(function(){
   $('#numero').html(i);
          i++;
   }, 5000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="numero"></div>
<button id="boton">pulsame</button>

Que podría hacer para que al pulsar el botón "pulsame" el div con id "numero" pasase al siguiente numero sin que haga falta esperar los 5 segundos y que luego siga cada 5 segundos?

2
  • Antes de entrar al interval mostrar ese valor en el dom e incrementar $('#numero').html(i++); según entiendo
    – Dev. Joel
    el 6 abr. 2018 a las 1:14
  • Da igual que empieze por 1 o 0, quiero que al pulsar "pulsame" se pase al siguiente numero y luego siga mostrando el siguiente cada 5 segundos... el 6 abr. 2018 a las 1:20

1 respuesta 1

1

Hay que limpiar el intervalo y lanzar uno nuevo. Para seguirle la pista definís una variable que lo contenga y así podes limpiarlo y redefinirlo.

Aquí hay un borrador de como podes implementarlo.

var i = 0;
function cuenta(){
   $('#numero').html(i);
   i++;
}

var myTimer;

function empezarCuenta(n){
  i = n;
  clearInterval(myTimer);
  myTimer = setInterval(cuenta, 5000);
}

$(function(){ 
   $('#boton').click(function(){cuenta();empezarCuenta(i);});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="numero"></div>
<button id="boton">pulsame</button>

i, myTimer y cuenta quedan por fuera para ser mas globales

una solución mas elegante podes encontrarla aquí: https://stackoverflow.com/q/8126466/1423096

2
  • Es un ejemplo interesante pero creo que no responde a mi duda, yo quisiera que al pulsar se pase al siguiente numero, por ejemplo si va por el 5 y yo pulso el botón se pase a 6, y luego continué cada cinco segundos con los siguientes números. el 6 abr. 2018 a las 12:49
  • ahí le saque el i=0; y empieza la cuenta desde el siguiente. la mecánica es la misma, reseteas el intervalo y lanzas uno nuevo. el 6 abr. 2018 a las 12:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.