¿Por qué no funciona el setTimeout dentro de este bloque if?

Question

Este bloque forma parte de la validación de un formulario. Esta parte es donde luego de validar el formulario sin errores muestra un mensaje y después de 5 segundos redirecciona a otra página usando setTimeout y window.location.href. Funciona correctamente, solo que no lo hace tomando en cuenta los segundos indicados.

¿Dónde está el error?

const esExito = true;

if(esExito) {
    const dire = "wishlist.html";
    $form.className = 'oculto';
    document.querySelector('#exito').className = '';
    setTimeout(redireccionar(dire), 5000);
} 

function redireccionar(dire) {
    window.location.href = dire ;
}

puedes agregar todo el codigo de tus metodos?, parece que function redireccionar es parte del bloque if(es Exito) — Miguel Zarate, Feb 24 '20 at 17:17

harifo · Answer 1 · 2020-02-24T17:51:58.380

4

Te recomiendo dejarlo de la siguiente manera, dada la documentación de setTimeOut de developer.mozilla.org

const esExito = true;

if(esExito) {  
    setTimeout(function(){
         redireccionar();
         }, 5000);
} 

function redireccionar() {
    alert('redireccion');
}

Saludos y escribe cualquier duda.

edited Feb 24 '20 at 17:51

answered Feb 24 '20 at 17:17

harifo

1,155
5
25

1

Yo no veo nada de JQUery en tu código – BetaM Feb 24 '20 at 17:23
1

No estoy de acuerdo con esta respuesta, estás de acuerdo no te equivocaste? – Fernando Torres Feb 24 '20 at 17:26
1

Si, acabo de corregirlo, mil disculpas si confundí al receptor de la respuesta – harifo Feb 24 '20 at 17:29
1

cambia la documentacion a MSDN y estaria perfecta tu respuesta – JackNavaRow Feb 24 '20 at 17:44
@Aprendiz la pregunta es de jquery? – Juan Feb 24 '20 at 20:01
No @ Juan no lo es – BetaM Feb 24 '20 at 21:21

David_helo · Answer 2 · 2020-02-24T19:41:14.097

4

El problema es que estas llamando a la función con el método call (). Esto hace que la función sea llamada (se ejecute) en ese mismo instante. La solución es insertar la función dentro del setTimeout(una función anónima) o llamar a una referencia de esta función.

const esExito = true;

if(esExito) {
    const dire = "wishlist.html";
    setTimeout(function() {
        alert("Hola")
}, 3000);
}

edited Feb 24 '20 at 19:41

answered Feb 24 '20 at 17:18

David_helo

843
8
23

la respuesta valida y que explica el problema – JackNavaRow Feb 24 '20 at 17:44

JackNavaRow · Accepted Answer · 2020-02-24T17:43:02.313

No toma en cuenta los segundos indicados porque estas ejecutando la funcion redireccionar(dire) el retorno es undefined cuando el timeout espera un tipo function colocare un ejemplo para que comprendas mas :

function tal(dir){
  //codigo a ejecutar
}
console.log(typeof(tal()))

lo ideal es que tu funcion espere por parametro y retorne una función esto se conoce como Clousure ó Clausuras mira el siguiente ejemplo:

console.log(typeof(redireccionar()))
setTimeout(redireccionar("av. siempre viva springfield"), 3000); 

function redireccionar(dire) {

    return () => console.log("direccion despues de los 3seg" ,dire) ;
}

Tu código quedaria de esta forma :

const esExito = true;

if(esExito) {
    const dire = "wishlist.html";
    $form.className = 'oculto';
    document.querySelector('#exito').className = '';
    setTimeout(redireccionar(dire), 5000);
} 

function redireccionar(dire) {
    return () => window.location.href = dire ;
}

score 1 · Answer 4 · answered Feb 24 '20 at 17:41

Estas agregando la funcion en tu mismo bloque de definicion de la primer funcion, aqui agrego una correccion y ya esta probada.

  function redireccionar(dire) {
       console.log('action');
        return () => window.location.href = dire ;
    }

    function verificaExito(){
    const esExito = true;

    if(esExito) {
        const dire = "wishlist.html";
       // $form.className = 'oculto';
       // document.querySelector('#exito').className = '';
        setTimeout(redireccionar(dire), 5000);
    } 
    }
    verificaExito();

¿Por qué no funciona el setTimeout dentro de este bloque if?

4 Answers4