如何在我的javascript中延迟执行以下操作

Question

我想在下面的代码中延迟执行:

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

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

Answer 1

你可以用setTimeout它:

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

例如:

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

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

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

setTimeout在一个间隔之后安排一个要运行的功能(一次).调用它的代码会继续,并且在将来的某个时间点(在您指定的大致时间之后,尽管不精确),该函数将由浏览器调用.

所以假设你有一个名为output附加文本的函数到页面.这个输出:

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;
}

......(几秒钟后):

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

注意第二行.剩下foo的代码在任何一个预定函数之前运行,因此我们看到该D行之前的B行.

setTimeout 返回一个句柄(这是一个非零数字),您可以在它发生之前取消回调:

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

还有相关的setInterval/ clearInterval它做同样的事情,但是在你指定的间隔重复(直到你停止它).