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

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

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

原文链接

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

a标签调用js函数写法总结

这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

JS中function

在js程序开始执行前,引擎会查找所有var声明的变量和function声明的函数,集中到当前作用域顶部集中创建,赋值留在原地;声明方式创建函数--会被声明提前

Js函数curry化

最近的某次面试被问到了两次相关的问题,但是自己居然都没答好,尤其第二次,先来看看面试官给的题目是什么样子的:这一问给我问懵逼了,add(1)(2)(3)() === add(0)(2)(4)();这样的咱会实现啊,你再多加几个参数咱也能实现啊

js中函数的原型

js中每一个构造函数都有一个prototype的属性,prototype指向一个对象,而这个对象的属性和方法都会被构造函数的实例所继承,因此,需要一些共享的属性和方法可以写在构造函数的原型中

JavaScript全局属性和全局函数

调用上面的全局函数而不是全局方法的属性是有意义的,因为函数是全局调用的,而不是任何对象。 无论如何,您也可以调用这些函数方法,因为它们是运行它们的全局对象的方法。在web浏览器中,全局对象是浏览器窗口

前端常用的js函数方法整理

判断js类型: js有自己判断方法 typeof 但是当他遇到引用类型的时候得到的结果往往不是我们想要的,有没有时候后台返回的参数是null或者undefined然后就被丢到了页面上,很难看,要每一个地方都去处理

用 await/async 正确链接Js中的多个函数

在我完成 electrade 的工作之余,还帮助一个朋友的团队完成了他们的项目。最近,我们希望为这个项目构建一个 Craiglist 风格的匿名电子邮件中继,其中包含 “serverless” Google Firebase Function

云函数

云函数提供了一种 直接在云上运行,无状态的、短暂的、由事件触发的代码 的能力。ServerLess,即无服务器架构,也叫轻服务,它包含两个部分,如下:

js函数、作用域、声明提前、arguments对象

函数的定义:用来执行某些特定功能的代码,为了减少重复使用代码,需要的时候直接调用。函数名:根据功能来自己定义的名称;参数:传入函数内的变量;这里的参数是形参(形式参数),可以给形参赋值

JS异常函数之箭头函数

在JS中,箭头函数可以像普通函数一样以多种方式使用。但是,它们一般用于需要匿名函数表达式,例如回调函数。下面示例显示举例箭头函数作为回调函数,尤其是对于map(), filter(), reduce(), sort()等数组方法。

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

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

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