如何使JavaScript休眠或等待


Posted in Javascript onApril 27, 2021

概述

JavaScript不具有 sleep()函数,该函数会导致代码在恢复执行之前等待指定的时间段。如果需要JavaScript等待,该怎么做呢?

假设您想将三则消息记录到Javascript控制台,每条消息之间要延迟一秒钟。JavaScript中没有 sleep() 方法,所以你可以尝试使用下一个最好的方法 setTimeout()。

不幸的是,setTimeout() 不能像你期望的那样正常工作,这取决于你如何使用它。你可能已经在JavaScript循环中的某个点上试过了,看到 setTimeout() 似乎根本不起作用。

问题的产生是由于将 setTimeout() 误解为 sleep() 函数,而实际上它是按照自己的一套规则工作的。

浏览一下 setTimeout() 的文档,它似乎需要一个 "延迟 "参数,以毫秒为单位。

回到原始问题,您尝试调用 setTimeout(1000) 在两次调用 console.log() 函数之间等待1秒。

不幸的是 setTimeout() 不能这样工作:

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() 不存在一样。

回顾文档,你会发现问题在于实际上第一个参数应该是函数调用,而不是延迟。毕竟,setTimeout() 实际上不是 sleep() 方法。

你重写代码以将回调函数作为第一个参数并将必需的延迟作为第二个参数:

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秒的理想效果。

在讨论如何解决此问题之前,让我们更详细地研究一下 setTimeout() 函数。

检查setTimeout ()

你可能已经注意到上面第二个代码片段中使用了箭头函数。这些是必需的,因为你需要将匿名回调函数传递给 setTimeout(),该函数将在超时后运行要执行的代码。

在匿名函数中,你可以指定在超时时间后执行的任意代码:

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

理论上,你可以只传递函数作为第一个参数,回调函数的参数作为剩余的参数,但对我来说,这似乎从来没有正确的工作:

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

人们使用字符串解决此问题,但是不建议这样做。从字符串执行JavaScript具有安全隐患,因为任何不当行为者都可以运行作为字符串注入的任意代码。

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

那么,为什么在我们的第一组代码示例中 setTimeout() 失败?好像我们在正确使用它,每次都重复了1000ms的延迟。

原因是 setTimeout() 作为同步代码执行,并且对 setTimeout() 的多次调用均同时运行。每次调用 setTimeout() 都会创建异步代码,该代码将在给定延迟后稍后执行。由于代码段中的每个延迟都是相同的(1000毫秒),因此所有排队的代码将在1秒钟的单个延迟后同时运行。

如前所述,setTimeout() 实际上不是 sleep() 函数,取而代之的是,它只是将异步代码排入队列以供以后执行。幸运的是,可以使用 setTimeout() 在JavaScript中创建自己的 sleep() 函数。

如何编写sleep函数

通过Promises,async 和 await 的功能,您可以编写一个 sleep() 函数,该函数将按预期运行。

但是,你只能从 async 函数中调用此自定义 sleep() 函数,并且需要将其与 await 关键字一起使用。

这段代码演示了如何编写一个 sleep() 函数:

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被解决为止。

一个简单的选择

另外,你可以在第一次调用 setTimeout() 时指定增加的超时时间。

以下代码等效于上一个示例:

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

使用增加超时是可行的,因为代码是同时执行的,所以指定的回调函数将在同步代码执行的1、2和3秒后执行。

它会循环运行吗?

如你所料,以上两种暂停JavaScript执行的选项都可以在循环中正常工作。让我们看两个简单的例子。

这是使用自定义 sleep() 函数的代码段:

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()

这是一个简单的使用增加超时的代码片段:

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

我更喜欢后一种语法,特别是在循环中使用。

总结

JavaScript可能没有 sleep() 或 wait() 函数,但是使用内置的 setTimeout() 函数很容易创建一个JavaScript,只要你谨慎使用它即可。

就其本身而言,setTimeout() 不能用作 sleep() 函数,但是你可以使用 async 和 await 创建自定义JavaScript sleep() 函数。

采用不同的方法,可以将交错的(增加的)超时传递给 setTimeout() 来模拟 sleep() 函数。之所以可行,是因为所有对setTimeout() 的调用都是同步执行的,就像JavaScript通常一样。

希望这可以帮助你在代码中引入一些延迟——仅使用原始JavaScript,而无需外部库或框架。

以上就是如何使JavaScript休眠或等待的详细内容,更多关于JavaScript休眠或等待的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
一些经常会用到的Javascript检测函数
May 31 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
javascript实现简易聊天室
Jul 12 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
js实现简单抽奖功能
Nov 24 Javascript
分享15个Webpack实用的插件!!!
Mar 31 Javascript
JavaScript 实现页面滚动动画
如何用JS实现网页瀑布流布局
分享几个JavaScript运算符的使用技巧
Apr 24 #Javascript
JavaScript 防篡改对象的用法示例
Apr 24 #Javascript
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
You might like
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP中16个高危函数整理
2019/09/19 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Python简单实现控制电脑的方法
2018/01/22 Python
flask框架视图函数用法示例
2018/07/19 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
电子商务个人自荐信
2013/12/12 职场文书
初三化学教学反思
2014/01/23 职场文书
技术经济专业求职信
2014/09/03 职场文书
求职信格式范文
2015/03/19 职场文书
小数乘法教学反思
2016/02/22 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL