segundos - Cómo retrasar la ejecución entre lo siguiente en mi javascript

habilitar javascript en chrome en windows

Question

Quiero retrasar la ejecución entre los siguientes códigos:

$("#myName").val("Tom");
///delay by 3s
$("#YourName").val("Jerry");
//delay by 3s

$("#hisName").val("Kids");

Answer 1

No se puede "retrasar" en JavaScript sin bloquear el navegador; es decir, el usuario no puede mover el mouse ni hacer clic en nada (¡indeseable por más de 3 segundos!).

En su lugar, debería fijarse un tiempo de espera, que ejecutará el código designado en el futuro ...

$("#myName").val("Tom");
setTimeout(function () {
    $("#YourName").val("Jerry");

    setTimeout(function () {
        $("#hisName").val("Kids");
    }, 3000);
}, 3000);

Puede consultar la documentación de setTimeout aquí: setTimeout . Lo básico es que se pasa una referencia de función o una cadena (que, sin embargo, debe evitarse) como primer parámetro, y el segundo parámetro especifica cuántos milisegundos debe retrasarse el código.

Answer 2

Puedes usar setTimeout para eso:

setTimeout(function() {
    // Your code here
}, delayInMilliseconds);

P.ej:

$("#myName").val("Tom");

/// wait 3 seconds
setTimeout(function() {
    $("#YourName").val("Jerry");

    /// wait 3 seconds
    setTimeout(function() {
        $("#hisName").val("Kids");
    }, 3000);
}, 3000);

setTimeout programa una función para ejecutarse (una vez) después de un intervalo. El código que lo llama continúa, y en algún momento en el futuro (después de aproximadamente el tiempo que especificó, aunque no precisamente), la función es llamada por el navegador.

Supongamos que tiene una función llamada output que agrega texto a la página. La salida de esto:

foo();
function foo() {
    var counter = 0;

    output("A: " + counter);
    ++counter;
    setTimeout(function() {
        output("B: " + counter);
        ++counter;
        setTimeout(function() {
            output("C: " + counter);
            ++counter;
        }, 1000);
    }, 1000);
    output("D: " + counter);
    ++counter;
}

... es (después de un par de segundos):

A: 0 D: 1 B: 2 C: 3

Note la segunda línea de eso. El resto del código de foo ejecuta antes de cualquiera de las funciones programadas, por lo que vemos la línea D antes de la línea B

setTimeout devuelve un manejador (que es un número distinto de cero) que puede usar para cancelar la devolución de llamada antes de que suceda:

var handle = setTimeout(myFunction, 5000);
// Do this before it runs, and it''ll never run
clearTimeout(handle);

También está el setInterval / clearInterval relacionado que hace lo mismo, pero repetidamente en el intervalo que especifique (hasta que lo detenga).

Answer 3

Puedes usar la función setTimeout. Creo que la sintaxis es

window.setTimeout(''$("#YourName").val("Jerry")'',3000);

Answer 4

Si el retraso es siempre el mismo (3s en su ejemplo), puede evitar el código anidado y usar setInterval lugar de setTimeout :

var i
  , ids = ["myName", "YourName", "hisName"]
  , names = ["Tom", "Jerry", "Kids"];

i = setInterval(function () {
    if (ids.length > 0) {
        $("#" + ids.shift()).val(names.shift());
    } else {
        clearInterval(i);
    }
}, 3000);