javascript里的sleep()方法
时间:2022-05-03
本文章向大家介绍javascript里的sleep()方法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
很多编程语言里都有sleep()
,delay()
等方法,它能让我们的程序不那么着急的去执行下一步操作,而是延迟、等待一段时间。软件开发中经常会遇到需要这样的函数,比如等待几分钟去检查某一事件是否发生。JavaScript里有setTimeout()
方法来实现设定一段时间后执行某个任务,但写法很丑陋,需要提供回调函数:
setTimeout(function(){ alert("Hello"); }, 3000);
JavaScript Promise API是新出现了一个API,借助 Promise,我们可以对setTimeout
函数进行改良,下面就是把setTimeout()
封装成一个返回Promise的sleep()
函数。
// https://zeit.co/blog/async-and-await
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
// 用法
sleep(500).then(() => {
// 这里写sleep之后需要去做的事情
})
你会发现,这种写法很优雅,很像其它编程语言里的延迟、等待函数。Promise API使我们避免传入回调函数,我们在实现中还使用了ES6中的箭头(arrow)函数。
这里需要提到的一个问题是,这个sleep()
在执行的时候是“block”程序的继续执行的。它不是同步的。如果想让它同步执行,不妨碍执行之后的代码,我们可以使用 async/await
关键字。
(async function() {
console.log('Do some thing, ' + new Date());
await sleep(3000);
console.log('Do other things, ' + new Date());
})();
执行结果:
Do some thing, Mon Feb 23 2015 21:52:11 GMT+0800 (CST)
Do other things, Mon Feb 23 2015 21:52:14 GMT+0800 (CST)
你会发现,这一次,sleep()
并没有阻碍第二个console
的执行。
但 async/await
是ES7中的语法,目前还是处于试验阶段。那现在想用这个 async/await
特性怎么办?可以尝试 google 的一个 JavaScript 预编译器 traceur,可以将高版本的 JavaScript 编译为 ES5 代码,已经实验性的支持了 async/await (需要使用 –experimental 来指定开启)。
- React项目配置2(自己封装Ajax)
- React项目配置1(如何管理项目公共js方法)
- c++中stack、queue、vector的用法一、栈(stack)二、队列(queue)三、向量(vector)
- React技巧7(TodoList实现3组件之间传递数据之优化)
- React技巧6(TodoList实现2组件之间传递数据)
- POJ A Knight's Journey
- React技巧5(TodoList实现)
- 求一个数n次方后的末尾数(数论/快速幂)问题描述解题思路代码实现运行结果参考
- Catch That Cow
- React技巧4(如何处理List里面的Item)
- ZOJ 3620 Escape Time II
- React技巧3(如何优雅的渲染一个List)
- FZU 电动车通行证制度
- 贪心算法总结贪心算法基本思路算法实现实例分析参考
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Hadoop2.7.6_05_mapreduce-Yarn
- Hadoop2.7.6_06_mapreduce参数优化
- NFS服务搭建与配置
- Hadoop2.7.6_07_HA高可用
- Hadoop2.7.6_08_Federation联邦机制 1.1. HDFS-federation图解2.1. 注意事项3.1. 部署3.2. 环境变量3.3. c
- ThinkPHP5 SQL注入漏洞 && PDO真/伪预处理分析
- Hive-1.2.1_01_安装部署
- Supervisord远程命令执行漏洞(CVE-2017-11610)
- Hive-1.2.1_02_简单操作与访问方式
- PHP-CGI远程代码执行漏洞(CVE-2012-1823)分析
- Hive-1.2.1_03_DDL操作 1.1. Create Database1.2. Drop Database1.3. Use Database2.1. Cre
- Hive-1.2.1_04_DML操作 5.1. Join8.1. 使用案例8.2. Transform实现
- Hive-1.2.1_05_案例操作
- Mysql字符编码利用技巧
- Hive-1.2.1_06_累计报表查询