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 来指定开启)。

原文发布于微信公众号 - php(phpdaily)

原文发表时间:2016-06-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小筱月

关于 vue 不能 watch 数组变化 和 对象变化的解决方案

再如使用 splice(0, 2, 3) 从数组下标 0 删除两个元素,并在下标 0 插入一个元素 3:

1445
来自专栏Java 技术分享

Struts2 配置文件小结

26210
来自专栏醉梦轩

Python和JavaScript中的生成器与协程

Python和JavaScript中都有生成器(Generator)和协程(coroutine)的概念。本文通过分析两者在这两种语言上的使用案例,来对比它们的差...

1982
来自专栏爱撒谎的男孩

Springmvc之接受请求参数

3326
来自专栏快乐八哥

JSON入门指南--客户端处理JSON

在传统的Web开发过程中,前端工程师或者后台工程师会在页面上写后台的相关代码,比如在ASP.NET MVC4里面写如下代码: @Html.TextBoxFor(...

1666
来自专栏佳爷的后花媛

tp中的M,D,C,A,I,S方法

D方法实例化模型类的时候通常是实例化某个具体的模型类,如果仅仅是对数据表进行基本的CURD操作的话,可以使用M方法.由于不要加载具体的模型类,所以性能会更好.如...

581
来自专栏cnblogs

knockout源码分析之订阅

一、主类关系图 ? 二、类职责 2.1、observable(普通监控对象类) observable(他其是一个function)的内部实现: 1.首先声明一个...

1858
来自专栏小灰灰

Java并发学习之Volatile及内存模型探究

volatile工作原理 java编程语言允许线程访问共享变量,为了确保共享变量能被准确和一致的更新,线程应该确保通过排他锁单独获得这个变量。 Java语言...

1899
来自专栏小筱月

关于 vue 不能 watch 数组变化 和 对象变化的解决方案

再如使用 splice(0, 2, 3) 从数组下标 0 删除两个元素,并在下标 0 插入一个元素 3:

763
来自专栏后台及大数据开发

springBoot系列教程06:参数验证及验证信息国际化

在springboot应用中要验证参数是否正确很简单,web应用已经包含了validation的

1062

扫码关注云+社区