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完成
      任务完成
      */
      
  • 相关阅读:
    TCP的三次握手与四次挥手
    HashMap源代码分析(JDK1.8)
    HashMap实现原理分析(JDK1.8前)
    codebook法分割前景目标
    平均场景法分割前景目标
    边缘梯度方向直方图的构建
    学习opencv 第六章 习题十三
    《学习OpenCV》 第四章 习题六
    《学习Opencv》第五章 习题6
    Opencv实现的简易绘图工具
  • 原文地址:https://www.cnblogs.com/EricZLin/p/13939633.html
Copyright © 2011-2022 走看看