JavaScript中如何在一个循环中等待示例代码详解

下面是如何使用for..of 循环来迭代一个数组并在循环内等待：

const fun = (prop) => {
  return new Promise(resolve => {
    setTimeout(() =>
      resolve(`done ${prop}`), 1000);
  })
}

const go = async () => {
  const list = [1, 2, 3]

  for (const prop of list) {
    console.log(prop)
    console.log(await fun(prop))
  }

  console.log('done all')
}

go()

你需要把循环放在一个异步函数中，然后你可以使用await ，循环会停止迭代，直到我们正在等待的承诺得到解决。

你可以用for...in循环做同样的事情，对一个对象进行迭代：

const fun = (prop) => {
  return new Promise(resolve => {
    setTimeout(() =>
      resolve(`done ${prop}`), 1000);
  })
}
const go = async () => {
  const obj = { a: 1, b: 2, c: 3 };

  for (const prop in obj) {
    console.log(prop)
    console.log(await fun(prop))
  }

  console.log('done all')
}

go()

你也可以使用while 或do..while 或for 循环，也是这种结构。

但是你不能用Array.forEach() 或Array.map() 来等待。

到此这篇关于在JavaScript中如何在一个循环中等待（附代码示例）的文章就介绍到这了,更多相关js循环等待内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript自定义等待wait函数实例分析

    本文实例讲述了JavaScript自定义等待wait函数用法.分享给大家供大家参考.具体分析如下: 下面是一个js自定义的wait函数,可以暂停程序的执行 function sleep(delay) { var start = new Date().getTime(); while (new Date().getTime() < start + delay); } //usage //wait for 3 seconds sleep(3000); 希望本文所述对大家的javascript程序设计

  • 关于JavaScript中异步/等待的用法与理解

    昨天更新的是"JavaScript中的Promise使用详解",其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出.今天就说一说"JavaScript中的async/await的用法和理解" JavaScript中异步/等待的用法和理解 编程语言中任意一个关键字都是有意义的,我们先从字面意思来理解. 1.async async 是"异步"的简写,带async关键字的函数,是声明异步函数,返回值是promise对象,如

  • javaScript同意等待代码实现心得

    正确源程序如下: 复制代码 代码如下: <script type="text/javascript"> var lastTime = 3; function abc() { var btnReg = document.getElementById("btnReg"); if (!btnReg) { return; } if (lastTime <= 0) { btnReg.value = "同意"; btnReg.disable

  • 如何使JavaScript休眠或等待

    概述 JavaScript不具有 sleep()函数,该函数会导致代码在恢复执行之前等待指定的时间段.如果需要JavaScript等待,该怎么做呢? 假设您想将三则消息记录到Javascript控制台,每条消息之间要延迟一秒钟.JavaScript中没有 sleep() 方法,所以你可以尝试使用下一个最好的方法 setTimeout(). 不幸的是,setTimeout() 不能像你期望的那样正常工作,这取决于你如何使用它.你可能已经在JavaScript循环中的某个点上试过了,看到 setTi

  • 等待指定时间后自动跳转或关闭当前页面的js代码

    复制代码 代码如下: //指定时间之后跳转 <script language="javascript"> function go( ) {//定义函数 window.location="main.html";//页面跳转 } window.setTimeout("go()",1000);//1秒后执行函数go </script> //指定时间之后自动关闭 <script type="text/javascr

  • Javascript中异步等待的深入理解

    在本文中,我们将探讨async/await对于每个Javascript开发人员来说,异步编程的首选工具.如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解. 介绍 async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为. 定义异步功能 要定义一个异步函数,您所要做的只是在函数定义之前添加一个async关键字. // async function always returns a p

  • JavaScript中如何在一个循环中等待示例代码详解

    下面是如何使用for..of 循环来迭代一个数组并在循环内等待: const fun = (prop) => { return new Promise(resolve => { setTimeout(() => resolve(`done ${prop}`), 1000); }) } const go = async () => { const list = [1, 2, 3] for (const prop of list) { console.log(prop) console

  • 在Java中操作Zookeeper的示例代码详解

    依赖 <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId>zookeeper</artifactId> <version>3.6.0</version> </dependency> 连接到zkServer //连接字符串,zkServer的ip.port,如果是集群逗号分隔 String connectStr = "192.

  • 封装一下vue中的axios示例代码详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御cSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步axios文档. 安装 npm install axios; // 安装axios 好了,下面开始今天的正文. 此次封装用以解决: (

  • python golang中grpc 使用示例代码详解

    python 1.使用前准备,安装这三个库 pip install grpcio pip install protobuf pip install grpcio_tools 2.建立一个proto文件hello.proto // [python quickstart](https://grpc.io/docs/quickstart/python.html#run-a-grpc-application) // python -m grpc_tools.protoc --python_out=. -

  • java中的前++和后++的区别示例代码详解

    java中的前加加++和后加加++,有很多人搞的很晕,不太明白!今天我举几个例子说明下前++和后++的区别! 其实大家只要记住一句话就可以了,前++是先自加再使用而后++是先使用再自加! 前++和后++总结:其实大家只要记住一句话就可以了,前++是先自加再使用而后++是先使用再自加! 请大家看下面的例子就明白了! public class Test { public static void main(String[] args) { //测试,前加加和后加加 //前++和后++总结:其实大家只要

  • 微信小程序 获取手机号 JavaScript解密示例代码详解

    微信小程序 获取手机号 JavaScript解密示例代码详解

    当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号. 刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被严格核验过的,然后就开始了获取手机号之旅,网上教程有很多,但不知什么原因,都是会少一些内容,有的只有前端代码,没有后端:有的后端代码是PHP,不是

  • vue 中动态绑定class 和 style的方法代码详解

    先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • C# 从 UTF-8 流中读取字符串的正确方法及代码详解

     我们下面的代码是从一个流 stream 中读取 UTF-8 编码的字符串.我们可以先考虑一下其中存在的潜在问题. string ReadString(Stream stream) { var sb = new StringBuilder(); var buffer = new byte[4096]; int readCount; while ((readCount = stream.Read(buffer)) > 0) { var s = Encoding.UTF8.GetString(buf

  • vue2.0自定义指令示例代码详解

    1.什么是指令? 指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记. 除了 Vue 核心携带着的一些默认指令(v-model 和 v-show)之外, Vue 还允许你注册自己的自定义指令.某些情况下,还是需要对普通元素进行一些底层 DOM 访问, 这也是自定义指令仍然有其使用场景之处. 2.全局指令: 当页面加载时,元素将获取焦点,事实上,在访问页面时,如果你还没有点击任何地方,上面的输入框现在应该处于获取焦点的状态.现在让我们构建指令以完成此效果: <te

随机推荐