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

更新日期: 2017-11-23阅读量: 8994标签: 函数

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

原文链接

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/158

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

“箭头函数”和“函数”是否等效/可互换?

ES2015 中的箭头函数提供了更简洁的语法。我现在可以用箭头函数替换我所有的函数声明/表达式吗?我需要注意什么?

Generator函数

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

Js函数记忆

函数记忆是一种编程技巧,通过牺牲算法的空间复杂度以换取更优的时间复杂度。定义: 若传递的参数一致,则通过缓存读取存取计算结果的一种编程技巧

Js的函数申明、函数表达式、箭头函数

函数声明和表达式之间的差别是:JavaScript 解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。而用函数表达式创建的函数是在运行时进行赋值

js中reduce()方法

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组。

理解 JavaScript Mutation 突变和 PureFunction 纯函数

不可变性、纯函数、副作用,状态可变这些单词我们几乎每天都会见到,但我们几乎不知道他们是如何工作的,以及他们是什么,他们为软件开发带来了什么好处。在这篇文章中,我们将深入研究所有这些,以便真正了解它们是什么以及如何利用它们来提高我们的Web应用程序的性能。

js函数式编程-函数合并

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

浅析js的工厂函数、构造函数

首先,说下工厂函数。顾名思义,就好比一个工厂一样,可以批量制造某种类型的东西。其实说白了就是封装了个方法减少重复工作,相信稍微有点码龄的人都懂。上代码:

JS常用工具函数整理

isStatic: 检测数据是不是除了symbol外的原始数据。isPrimitive:检测数据是不是原始数据。isObject:判断数据是不是引用类型的数据(例如:array,function,object,regexe,new Number(),new String())

点击更多...

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