让我们来创建一个JavaScript Wait函数

时间: 2017-11-23阅读: 2496标签: 函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。

当然,基于回调的编程很丑陋的。

如果您还没有使用过,那么开始接触并使用async/await和promise是非常有必要的。在async/await之前,我并没有十分痴迷于promise,就像您看到的下面的代码:


比回调地狱好点,但并不美观

关于async/await有很多很好的介绍,所以在这里就不再做过多讨论,只占用15秒:您使您的函数返回一个promise,然后使用await(内置了一个异步函数)来调用这个promise。

These examples will also make use of a new-ish JS feature, arrow functions. 这些示例还将使用一个新的JS特性,箭头函数。如果您习惯于下面这种写法:

function(a) { return console.log(a) }

现在改为:

(a) => console.log(a)

这样,我们就可以创建我们的Wait函数了。

Wait函数(在某些环境中也叫Sleep函数)很容易理解、使用和创建。顾名思义,就是我们想让程序等待一段时间。

只是设置一段延时来执行我们的promise。我们可以自定义我们等待的时间ms。

var wait = ms => new Promise((r, j)=>setTimeout(r, ms))

wait(2000)会返回一个promise,然后在2000ms后执行(2s)。

// Promise syntax
var prom = wait(2000)  // prom, is a promise
var showdone = ()=>console.warn('done')
prom.then(showdone)
// same thing, using await syntax
await wait(2000)
console.warn('done')

使用async/await语法要比promise的.then()更优雅。我们用一个立即执行函数包裹它,以便简洁。

(async () => { await wait(2000); console.warn('done') })()

或在常规代码中

var x = 1
var y = 2
await wait(2000)
console.warn(x)

What if we want to wait on an event, instead of just waiting x ms of time? 如果我们想等待某个事件,而不只是等待多少毫秒的延时呢?只需要控制这个promise什么时候执行就行了。

我们甚至可以设置调用的超时时间,如果事件永远不会发生,代码就不会一直等待。

假设在一个web页面中,我们想要等待一个内容为“Hello World”的DOM元素。我们会每100ms检查一次,并在2s后超时退出。

<div id=a>s</div>
<script>
var e = document.querySelector('#a')

  var waitForHello = timeoutms => new Promise((r, j)=>{
    var check = () => {
      console.warn('checking')
      if(e.innerHTML == 'Hello world') 
        r()
      else if((timeoutms -= 100) < 0)
        j('timed out!')
      else
        setTimeout(check, 100)
    }
    setTimeout(check, 100)
  })
//setTimeout(()=>{e.innerHTML='Hello world'}, 1000)
  (async ()=>{
    a.innerHTML = 'waiting..'
    waitForHello(2000)
  })()

</script>

不注释掉setTimeout那一行,就会在1s后将这个DIV的内容设置为“Hello World”,否则将会超时退出。

如您所见,async/await为您的代码创造了无限的可能性。

原文链接

javascript封装函数

使用函数有两步:1、定义函数,又叫声明函数, 封装函数。2、调用函数var 变量 = 函数名(实参);对函数的参数和返回值的理解

什么时候不该使用es6箭头函数?

箭头函数带来了很多便利。恰当的使用箭头函数可以让我们避免使用早期的.bind()函数或者需要固定上下文的地方并且让代码更加简洁。箭头函数也有一些不便利的地方。我们在需要动态上下文的地方不能使用箭头函数:定义需要动态上下文的函数

vue生命周期简介和钩子函数

简单的来说一下vue的生命周期函数:beforeCreate el 和 data 并未初始化,created 完成了data数据的初始化,el没有,beforeMount 完成了虚拟el和data初始化

css中calc()函数

css3中函数:用于动态计算长度值。(注意事项:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px));任何长度值都可以使用calc()函数进行计算;

Js方法/函数重载的实现

函数重载这项特性允许创建数项名称相同但输入输出类型或个数不同的子程序函数重载是强类型语言的特性,虽然 js 是弱类型语言,我们可以通过一些方法实现函数重载。

深入理解JavaScript函数

两种定义形式: 通过函数定义表达式来定义,通过函数声明语句来定义。tips:以表达式方式定义的函数(特别适合用来定义那些只会用到一次的函数),函数名是可选的

eval到底哪里不好?

为什么要少用eval?eval是 js 中一个强大的方法。都说eval == evil等于true,这篇文章将研讨eval的几个缺点和使用注意事项。

Javascript中函数作为对象的魅力

Javascript中函数作为对象的魅力Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象。那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性。并且最重要的,她还可以直接被调用

JavaScript 之函数式编程

是个程序员都知道函数,但是有些人不一定清楚函数式编程的概念。应用的迭代使程序变得越来越复杂,那么程序员很有必要创造一个结构良好、可读性好、重用性高和可维护性高的代码。

js 中的Generator 函数

首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全