zoukankan      html  css  js  c++  java
  • 循环中使用同步请求

    • 循环下的异步

      let  inner = ['in1','in2','in3'];
      function runTask(){
          console.log('任务开始')
          for (let index = 0; index < inner.length; index++) {
              const i = inner[index];
              setTimeout(() => {
                  console.log(`inner里的${i}完成`)
              }, 100);
              
          }
          console.log('任务完成')
      }
      
      runTask()
      /*
      任务开始
      任务完成
      inner里的in1完成
      inner里的in2完成
      inner里的in3完成
      */
      
      
      
    • 使用for循环同步

      let  inner = ['in1','in2','in3'];
      
      async function runTask(){
          const timeout = (i)=>{
              return new Promise(res=>{
                  setTimeout(() => {
                      console.log(`inner里的${i}完成`)
                      res()
                  }, 100);
              })
          }
          console.log('任务开始')
          for (let index = 0; index < inner.length; index++) {
              const i = inner[index];
              await timeout(i)
          }
          console.log('任务完成')
      }
      
      runTask()
      /*
      任务开始
      inner里的in1完成
      inner里的in2完成
      inner里的in3完成
      任务完成
      */
      
    • forEach使用await无效:由于在foreach中已经完成了一次对于循环的封装,当 使用foreach时其实也就相当于调用了一个封装了while或者for循环的函数,这个函数本身并没有使用async/await来处理异步,所以使用时在回调函数里面加上async/await是没有作用的

      let  inner = ['in1','in2','in3'];
      
      function runTask(){
          const timeout = (i)=>{
              return new Promise(res=>{
                  setTimeout(() => {
                      console.log(`inner里的${i}完成`)
                      res()
                  }, 100);
              })
          }
          console.log('任务开始')
          inner.forEach(async (i)=>{
              await timeout(i)
          })
          console.log('任务完成')
      }
      
      runTask()
      /*
      务开始
      任务完成
      inner里的in1完成
      inner里的in2完成
      inner里的in3完成
      */
      
    • 多层循环下使用同步

      let  outer = ['out1','out2','out3'],inner = ['in1','in2','in3'];
      
      async function runTask(){
          const timeout1 = (outer) => {
              return new Promise(res => {
                  setTimeout(() => {
                      //console.log(out)
                      res()
                  }, 1000);
              })
          }
          const timeout2 = (inner)=>{
              return new Promise(res=>{
                  setTimeout(()=>{
                      //console.log(inner)
                      res()
                  },500)
              })
          }
          console.log('任务开始')
          for (let index = 0; index < outer.length; index++) {
              const o = outer[index];
              for (let index = 0; index < inner.length; index++) {
                  const i = inner[index];
                  await timeout1(i)
                  console.log(`inner里的${i}完成`)
              }
              await timeout2(o)
              console.log(`outer里的${o}完成`)
          }
          console.log('任务完成')
      }
      
      runTask()
      
      /*
      任务开始
      inner里的in1完成
      inner里的in2完成
      inner里的in3完成
      outer里的out1完成
      inner里的in1完成
      inner里的in2完成
      inner里的in3完成
      outer里的out2完成
      inner里的in1完成
      inner里的in2完成
      inner里的in3完成
      outer里的out3完成
      任务完成
      */
      
  • 相关阅读:
    实现两个整数变量的互换
    Js中replace替换所有*
    下载win10系统
    Linux网络基本网络配置方法介绍
    搭建Linux虚拟服务器
    解决SVN Cleanup错误: Failed to run the WC DB work queue associated with
    详细QRCode生成二维码和下载实现案例
    Win10中Vue.js的安装和项目搭建
    什么是Docker,它可干什么?
    Win10下搭建Git服务器
  • 原文地址:https://www.cnblogs.com/EricZLin/p/13939633.html
Copyright © 2011-2022 走看看