您的位置是:网站首页>Javascript编程Javascript编程

使用JavaScript实现休眠或等待

少儿编程网2021-02-23 16:26:35Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介JavaScript不具有sleep()函数,该函数会导致代码在恢复执行之前等待指定的时间段。如果需要JavaScript等待,该怎么做呢?假设您想将三则消息记录到Javascript控制台,每条消息之间要延迟一秒钟。JavaScript中没有sleep()方法,所以你可以尝试使用下一个最好的方法s

版权所有:http://wWw.pxcodeS.com

Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

JavaScript不具有 sleep() 函数,该函数会导致代码在恢复执行之前等待指定的时间段。如果需要JavaScript等待,该怎么做呢?Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

假设您想将三则消息记录到Javascript控制台,每条消息之间要延迟一秒钟。JavaScript中没有 sleep() 方法,所以你可以尝试使用下一个**好的方法 setTimeout()Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

不幸的是,setTimeout() 不能像你期望的那样正常工作,这取决于你如何使用它。你可能已经在JavaScript循环中的某个点上试过了,看到 setTimeout() 似乎根本不起作用。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

问题的产生是由于将 setTimeout() 误解为 sleep() 函数,而实际上它是按照自己的一套规则工作的。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

在本文中,我将解释如何使用 setTimeout(),包括如何使用它来制作一个睡眠函数,使JavaScript暂停执行并在连续的代码行之间等待。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

浏览一下 setTimeout() 的文档,它似乎需要一个 "延迟 "参数,以毫秒为单位。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

回到原始问题,您尝试调用 setTimeout(1000) 在两次调用 console.log() 函数之间等待1秒。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

不幸的是 setTimeout() 不能这样工作:Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

setTimeout(1000)
console.log(1)
setTimeout(1000)
console.log(2)
setTimeout(1000)
console.log(3)

for (let i = 0; i <= 3; i++) {
  setTimeout(1000)
  console.log(`#${i}`)
}

这段代码的结果完全没有延迟,就像 setTimeout() 不存在一样。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

回顾文档,你会发现问题在于实际上第一个参数应该是函数调用,而不是延迟。毕竟,setTimeout() 实际上不是 sleep() 方法。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

你重写代码以将回调函数作为第一个参数并将必需的延迟作为第二个参数:Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 1000)
setTimeout(() => console.log(3), 1000)

for (let i = 0; i <= 3; i++) {
  setTimeout(() => console.log(`#${i}`), 1000)
}

这样一来,三个console.log的日志信息在经过1000ms(1秒)的单次延时后,会一起显示,而不是每次重复调用之间延时1秒的理想效果。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

在讨论如何解决此问题之前,让我们更详细地研究一下 setTimeout() 函数。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

检查setTimeout ()

你可能已经注意到上面第二个代码片段中使用了箭头函数。这些是必需的,因为你需要将匿名回调函数传递给 setTimeout(),该函数将在超时后运行要执行的代码。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

在匿名函数中,你可以指定在超时时间后执行的任意代码:Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

// 使用箭头语法的匿名回调函数。
setTimeout(() => console.log("你好!"), 1000)
// 这等同于使用function关键字
setTimeout(function() { console.log("你好!") }, 1000)

理论上,你可以只传递函数作为第一个参数,回调函数的参数作为剩余的参数,但对我来说,这似乎从来没有正确的工作:Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

// 应该能用,但不能用
setTimeout(console.log, 1000, "你好")

人们使用字符串解决此问题,但是不建议这样做。从字符串执行JavaScript具有安全隐患,因为任何不当行为者都可以运行作为字符串注入的任意代码。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

// 应该没用,但确实有用
setTimeout(`console.log("你好")`, 1000)

那么,为什么在我们的第一组代码示例中 setTimeout() 失败?好像我们在正确使用它,每次都重复了1000ms的延迟。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

原因是 setTimeout() 作为同步代码执行,并且对 setTimeout() 的多次调用均同时运行。每次调用 setTimeout() 都会创建异步代码,该代码将在给定延迟后稍后执行。由于代码段中的每个延迟都是相同的(1000毫秒),因此所有排队的代码将在1秒钟的单个延迟后同时运行。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

如前所述,setTimeout() 实际上不是 sleep() 函数,取而代之的是,它只是将异步代码排入队列以供以后执行。幸运的是,可以使用 setTimeout() 在JavaScript中创建自己的 sleep() 函数。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

如何编写sleep函数

通过Promises,asyncawait 的功能,您可以编写一个 sleep() 函数,该函数将按预期运行。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

但是,你只能从 async 函数中调用此自定义 sleep() 函数,并且需要将其与 await 关键字一起使用。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这段代码演示了如何编写一个 sleep() 函数:Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

const repeatedGreetings = async () => {
  await sleep(1000)
  console.log(1)
  await sleep(1000)
  console.log(2)
  await sleep(1000)
  console.log(3)
}
repeatedGreetings()

此JavaScript sleep() 函数的功能与您预期的完全一样,因为 await 导致代码的同步执行暂停,直到Promise被解决为止。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

一个简单的选择

另外,你可以在第一次调用 setTimeout() 时指定增加的超时时间。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

以下代码等效于上一个示例:Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 2000)
setTimeout(() => console.log(3), 3000)

使用增加超时是可行的,因为代码是同时执行的,所以指定的回调函数将在同步代码执行的1、2和3秒后执行。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

它会循环运行吗?

如你所料,以上两种暂停JavaScript执行的选项都可以在循环中正常工作。让我们看两个简单的例子。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这是使用自定义 sleep() 函数的代码段:Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

async function repeatGreetingsLoop() {
  for (let i = 0; i <= 5; i++) {
      await sleep(1000)
    console.log(`Hello #${i}`)
    }
}
repeatGreetingsLoop()

这是一个简单的使用增加超时的代码片段:Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

for (let i = 0; i <= 5; i++) {
  setTimeout(() => console.log(`Hello #${i}`), 1000 * i)
}

我更喜欢后一种语法,特别是在循环中使用。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

总结

JavaScript可能没有 sleep()wait() 函数,但是使用内置的 setTimeout() 函数很容易创建一个JavaScript,只要你谨慎使用它即可。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

就其本身而言,setTimeout() 不能用作 sleep() 函数,但是你可以使用 asyncawait 创建自定义JavaScript sleep() 函数。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

采用不同的方法,可以将交错的(增加的)超时传递给 setTimeout() 来模拟 sleep() 函数。之所以可行,是因为所有对setTimeout() 的调用都是同步执行的,就像JavaScript通常一样。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

希望这可以帮助你在代码中引入一些延迟——仅使用原始JavaScript,而无需外部库或框架。Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

祝您编码愉快! Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

英文原文地址:https://medium.com/dev-genius/how-to-make-javascript-sleep-or-wait-d95d33c99909Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

作者:Dr. Derek AustinAge少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

更多编程相关知识,请访问:编程视频!!

以上就是使用JavaScript实现休眠或等待的详细内容,更多请关注少儿编程网其它相关文章!Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网Age少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

版权所有:http://wWw.pxcodeS.com


相关文章:

支持一下 ( )

使用JavaScript实现休眠或等待

      匿名评论
    • 评论
    人参与,条评论
    使用JavaScript实现休眠或等待

微信公众号

免费视频教程

先知道