如何在我的JavaScript中延迟以下操作之间的执行？

Question

我想在以下代码之间延迟执行：

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

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

- learning

---

可能重复 - Javascript sleep - Vik David

Answer 1

您可以使用 setTimeout 完成此操作：

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

E.g.:

$("#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，它们执行相同的操作，但是在您指定的时间间隔内重复执行（直到您停止它）。

- T.J. Crowder

Answer 2

您可以使用setTimeout函数。我认为其语法如下：

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

- Jad

---

转述达赖喇嘛的话：如果可以避免，永远不要在 setTimeout 中使用字符串。你总是可以避免使用它。 - T.J. Crowder

他是最聪明的:) 你说得对，我应该在关于将js代码放入字符串中添加免责声明。 - Jad

为什么我们不能加引号？你说的是包裹jQuery块的那个引号吗？ - Vennsoh

引号表示我们正在将JavaScript字符串传递给setTimeout。在T.J Crowder的答案中，传递了一个匿名函数。这是一种更好的方法。使用函数更易读且更健壮，例如语法错误会立即被检测到。您可以查看有关eval语句的讨论以获取更多信息。 - Jad

Answer 3

如果延迟时间始终相同（例如您的示例中为3秒），则可以避免嵌套代码并使用setInterval而不是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);

- nilfalse

Answer 4

如果在JavaScript中“延迟”操作，会导致浏览器被锁住，即用户无法移动鼠标或点击任何内容（超过3秒是不可取的！）。

相反，您应该考虑设置一个定时器，在未来的某个时间执行指定的代码...

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

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

你可以在这里查看 setTimeout 的文档：https://developer.mozilla.org/en/window.setTimeout。基本上，你需要传递第一个参数作为函数引用或字符串（应避免使用），第二个参数指定代码延迟多少毫秒执行。

- Matt