让我们一起创建一个 JavaScript Wait函数– Hacker Noon

本文转载自：众成翻译
译者：凯小凯
链接：http://www.zcfy.cc/article/4587
原文：https://hackernoon.com/lets-make-a-javascript-wait-function-fa3a2eb88f11

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

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

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

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

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

这些示例还将使用一个新的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)

如果我们想等待某个事件，而不只是等待多少毫秒的延时呢？只需要控制这个promise什么时候执行就行了。

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

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

<div>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为您的代码创造了无限的可能性。