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

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

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

原文链接

js函数式编程-函数合并

函数编程的函数组合:两个纯函数组合之后返回了一个新函数,函数组合可以避免在实现相同需求式而使用嵌套函数,实现可读性。实现一组函数的叠加产生一个新的函数我们可以利用reduce来实现,利用reduce 的累加的特性实现函数的嵌套。

javascript replace高级用法

在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中,这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定,当然也可以使用artTemplate模板来绑定数据,那么artTemplate模板它绑定数据的原理是什么呢?其实它就是利用了replace()方法。

js函数常见的写法以及调用方法

本文详细的介绍了5种js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法。不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考

js中HttpServletRequest的使用

HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息。

关于Javascript中的valueOf与toString

以上引申出对象数据的转换的问题:所有对象继承了两个转换方法:toString(): 它的作用是返回一个反映这个对象的字符串,valueOf():它的作用是返回它相应的原始值

js类的constructor中不支持异步函数吗?

如果是普通函数,可以用async 和await来解决你的问题。但你这个是在constructor里,constructor 的作用是返回一个对像实例,如果加了async就变成返回一个promise了,所以这个方法行不通

js函数形参和实参的区别

形参相当于函数中定义的变量,实参是在运行时的函数调用时传入的参数。 形参和实参是存在一种引用关系的,就好比变量中的引用关系。我们都知道,变量中的引用关系跟它们的值有关。形参和实参是存在一种引用关系的,就好比变量中的引用关系。

自定义编写js格式化数字的函数

处理网页时,有时需要显示长数字,但是当数字长度很长时,很难看出数字有多大。在这种情况下,当一些网站正在处理数字时,当数字的长度大于三时,它们用逗号分隔,这是一种常见的方式

关于变量值和函数参数

变量包含了两种不同类型的值:基本类型 (Undefined、null、Boolean、Number、string都属于基本类型),引用类型 (对象),如果在函数内重新给obj变量赋值一个新的对象,obj指向的内存地址改变,那之后更改对象内的属性,对函数外是没影响的

引用类型作为函数参数何解

在向函数传递引用类型的参数时,相当于把引用类型的地址复制给函数内的一个局部变量,所以局部变量和传入的参数会指向内存中的同一个对象。 局部变量的变化也会映射到传入参数

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

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

小程序专栏: 土味情话心理测试脑筋急转弯