entityMap|blocks|key|d241u|text|我想我没有完全理解你写的代码。但是，我建议您使用Promise.all。下面是我写的一个例子，希望能对你有所帮助：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|aqiod|​|4vmik|let+total+=+[];
$.each([1,2,3,4],+function+(data)+{
++//+Some+other+code.
++let+out;
++//+Create+a+new+promise+so+that+we+can+wait+on+the+getZip+method.
++new+Promise(function+(resolve,+reject)+{++
++++//+Create+a+holder+variable.+This+variable+with+hold+all+the+promises+that+are+output+from+the+getZip+method+you+have.
++++let+gZipPromises+=+[];
++++$.each([5,6,7,8],+function+(data2)+{++++
++++++//+Your+getZip+method+would+go+here.+wrap+the+call+to+getZip+in+gZipPromises.push+to+push+all+the+returned+promises+onto+the+holding+variable.
++++++gZipPromises.push(new+Promise(function+(resolve2,+reject2)+{+
++++++++//+Sample+Code
++++++++setTimeout(function+()+{
+++++++++total.push(data2);+
++++++++++resolve2("");+
++++++++},+10);
++++++++//+End+Sample+Code.
++++++}));
++++});++
++++//+Pass+the+holding+variable+to+Promise.all+so+that+all+promises+in+the+holding+variable+are+executed+before+resolving.
++++Promise.all(gZipPromises).then(function()+{+
++++++resolve()+
++++});
++}).then(function+()+{
++++//+This+will+be+called+only+when+all+getZip+promises+are+completed+in+the+second+loop.
++++console.log(total);
++});
});|code-block|syntax|javascript|dk1lm|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>|fssma|ablj3|话虽如此，我还是无法测试你的代码。但我认为这样做是可行的：(请注意，根据您提供的代码，将为最顶层的$.each的每次迭代记录变量total|4as9c|c3s10|let+total+=+[]
$.each(element,+function(data)+{
++//Some+other+code
++let+out;++
++//+Define+a+new+promise.
++new+Promise(function+(resolve,+reject)+{
++++let+gZipPromises+=+[];
++++$.each(element2,+function(data2)+{
++++++gZipPromises.push(
++++++++getZip(data2).then(function(txt){+//after+everything+has+finished+this+get's+called
++++++++++out+=+someFunction(txt,data2);
++++++++++total.push(out);
++++++++});
++++++);
++++)};
++++Promise.all(gZipPromises).then(function()+{+
++++++resolve()+
++++});
++}).then(function+()+{+
++++console.log(total)
++});++
)};|el2vu|86pet^0|O|B|0|0|0|0|0|1D|6|1S|5|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|X|9|@$A|Y|B|Z|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|10|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|11|9|@]|E|@]|F|$L|M]]|$2|N|4|O|6|K|8|12|9|@]|E|@]|F|$L|M]]|$2|P|4|H|6|7|8|13|9|@]|E|@]|F|$]]|$2|Q|4|R|6|7|8|14|9|@$A|15|B|16|C|D]|$A|17|B|18|C|D]]|E|@]|F|$]]|$2|S|4|H|6|7|8|19|9|@]|E|@]|F|$]]|$2|T|4|U|6|K|8|1A|9|@]|E|@]|F|$L|M]]|$2|V|4|H|6|7|8|1B|9|@]|E|@]|F|$]]|$2|W|4|-4|6|7|8|1C|9|@]|E|@]|F|$]]]]

<p>I do not think I fully understand the code you have written. However, I recommend you use <code>Promise.all</code>. Here is an example I have written that I hope helps guide you:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let total = [];
$.each([1,2,3,4], function (data) {
  // Some other code.
  let out;
  // Create a new promise so that we can wait on the getZip method.
  new Promise(function (resolve, reject) {  
    // Create a holder variable. This variable with hold all the promises that are output from the getZip method you have.
    let gZipPromises = [];
    $.each([5,6,7,8], function (data2) {    
      // Your getZip method would go here. wrap the call to getZip in gZipPromises.push to push all the returned promises onto the holding variable.
      gZipPromises.push(new Promise(function (resolve2, reject2) { 
        // Sample Code
        setTimeout(function () {
         total.push(data2); 
          resolve2(""); 
        }, 10);
        // End Sample Code.
      }));
    });  
    // Pass the holding variable to Promise.all so that all promises in the holding variable are executed before resolving.
    Promise.all(gZipPromises).then(function() { 
      resolve() 
    });
  }).then(function () {
    // This will be called only when all getZip promises are completed in the second loop.
    console.log(total);
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>With that said, I could not test your code. But I think this would work:
(Please note that based on the code you provided, the variable <code>total</code> would be logged for each iteration of the top most <code>$.each</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let total = []
$.each(element, function(data) {
  //Some other code
  let out;  
  // Define a new promise.
  new Promise(function (resolve, reject) {
    let gZipPromises = [];
    $.each(element2, function(data2) {
      gZipPromises.push(
        getZip(data2).then(function(txt){ //after everything has finished this get's called
          out = someFunction(txt,data2);
          total.push(out);
        });
      );
    )};
    Promise.all(gZipPromises).then(function() { 
      resolve() 
    });
  }).then(function () { 
    console.log(total)
  });  
)};</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|4ppe6|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|20m0|const+elements+=+[["foo.zip"],["bar.zip"],["baz.zip"]];
const+totalOut+=+getAllZips(elements)
++.then(text+=>+console.info(text))
++.catch(error+=>+console.error(error))

function+someFunction(text,+data)+{
++return+`${text}\nLength:+${data.length}`;
}

async+function+getAllZips(elements)+{
++let+promises+=+[];
++for(const+element+of+elements)+{
++++for(const+data+of+element)+{
++++++promises.push(getZip(data).then(text+=>+{
++++++++return+someFunction(text,+data);
++++++}));
++++}
++}
++return+Promise.all(promises);
}

async+function+getZip(file)+{
++return+new+Promise((resolve,+reject)+=>+{
++++JSZipUtils.getBinaryContent(`someURL/${file}`,+async+(err,+data)+=>+{
++++++try+{
++++++++if+(err)+throw+err;
++++++++const+zip+=+await+JSZip.loadAsync(data);
++++++++const+name+=+file.replace(".zip",+"");
++++++++resolve(await+zip.file(name).async('text'));
++++++}+catch(error)+{
++++++++reject(error);
++++++}
++++});
++});
}|code-block|syntax|javascript|22ofe|<script>/*IGNORE*/const+JSZipUtils+=+{getBinaryContent:(p,c)=>errs.gbc?c(new+Error('gbc'),null):c(null,{foo:true})};const+JSZip+=+{loadAsync:(d)=>errs.la?Promise.reject(new+Error('la')):({file:n=>({async:a=>errs.a?Promise.reject(new+Error('a')):Promise.resolve('Hello+World')})})};const+errs+=+{gbc:false,la:false,a:false};/*IGNORE*/</script>|mr5q|5935u^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|E|8|N|9|@]|A|@]|B|$F|G]]|$2|J|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|K|4|-4|6|7|8|P|9|@]|A|@]|B|$]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const elements = [["foo.zip"],["bar.zip"],["baz.zip"]];
const totalOut = getAllZips(elements)
  .then(text =&gt; console.info(text))
  .catch(error =&gt; console.error(error))

function someFunction(text, data) {
  return `${text}\nLength: ${data.length}`;
}

async function getAllZips(elements) {
  let promises = [];
  for(const element of elements) {
    for(const data of element) {
      promises.push(getZip(data).then(text =&gt; {
        return someFunction(text, data);
      }));
    }
  }
  return Promise.all(promises);
}

async function getZip(file) {
  return new Promise((resolve, reject) =&gt; {
    JSZipUtils.getBinaryContent(`someURL/${file}`, async (err, data) =&gt; {
      try {
        if (err) throw err;
        const zip = await JSZip.loadAsync(data);
        const name = file.replace(".zip", "");
        resolve(await zip.file(name).async('text'));
      } catch(error) {
        reject(error);
      }
    });
  });
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;/*IGNORE*/const JSZipUtils = {getBinaryContent:(p,c)=&gt;errs.gbc?c(new Error('gbc'),null):c(null,{foo:true})};const JSZip = {loadAsync:(d)=&gt;errs.la?Promise.reject(new Error('la')):({file:n=&gt;({async:a=&gt;errs.a?Promise.reject(new Error('a')):Promise.resolve('Hello World')})})};const errs = {gbc:false,la:false,a:false};/*IGNORE*/&lt;/script&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|20ci8|text|这听起来像是异步迭代器生成器的用例，但也许我只是过度设计了。您有一堆要迭代的资源，它们的内容是异步的。你希望它“看起来”同步，这样你就可以利用async/await：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3hfn1|​|cer4v|function+getZip(zipFile)+{
++/*
+++*+Theres+no+point+in+simplifying+this+function+since+it+looks+like
+++*+the+JSZip+API+deals+with+callbacks+and+not+Promises.
+++*/
++return+Promise.resolve(zipFile);
}

function+someFn(a,+b)+{
++return+`${a}:+${b.length}`;
}

async+function*+zipper(elements)+{
++for+(const+element+of+elements)+{
++++for+(const+data+of+element)+{
++++++const+txt+=+await+getZip(data);
++++++yield+someFn(txt,+data);
++++}
++}
}

(async()+=>+{
++const+elements+=+[
++++["hello"],
++++["world"],
++++["foo"],
++++["bar"]
++];
++let+total+=+[];
++for+await+(const+out+of+zipper(elements))+{
++++total.push(out);
++}
++console.log(total);
})();|code-block|syntax|javascript|8tjv|2oq9r^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|N|9|@]|A|@]|B|$H|I]]|$2|J|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|K|4|-4|6|7|8|P|9|@]|A|@]|B|$]]]]

<p>This kind of sounds like a use case for async iterator generators, but maybe I'm just over-engineering.  You have a bunch of resources that you want to iterate over and their contents are asynchronous.  You want it to "look" synchronous, so you can leverage async/await:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function getZip(zipFile) {
  /*
   * Theres no point in simplifying this function since it looks like
   * the JSZip API deals with callbacks and not Promises.
   */
  return Promise.resolve(zipFile);
}

function someFn(a, b) {
  return `${a}: ${b.length}`;
}

async function* zipper(elements) {
  for (const element of elements) {
    for (const data of element) {
      const txt = await getZip(data);
      yield someFn(txt, data);
    }
  }
}

(async() =&gt; {
  const elements = [
    ["hello"],
    ["world"],
    ["foo"],
    ["bar"]
  ];
  let total = [];
  for await (const out of zipper(elements)) {
    total.push(out);
  }
  console.log(total);
})();</code></pre>
</div>
</div>
</p>


<p>I tried to prevent async problems with promises in the following code. By using a .then function everything within that function gets called after the function has been resolved. But now I have the problem that neither can I extend the scope of the ".then function" enough to include the bits after the second loop nor can I to my knowledge easily pause the code until the function has been properly resolved and THEN continue with the loop iteration.</p>

<p>Here's my main code(simplified):</p>

<pre><code>let total = []
$.each(element, function(data) {
  //Some other code
  let out;
  $.each(element2, function(data2) {
    getZip(data2).then(function(txt){ //after everything has finished this get's called
      out = someFunction(txt,data2);
      total.push(out);
    });

  )};
   console.log(total)//this gets called first 
  //some other code that does some stuff with total
)};
</code></pre>

<p>Here's the getZip code which is asynchronous:</p>

<pre><code>        function getZip(zipFile) {
            return new Promise(function (resolve, reject){
                zip = new JSZip()
                JSZipUtils.getBinaryContent("someURL/" + zipFile, function (err, data) {
                    if (err) {
                        reject(err)
                    }
                    JSZip.loadAsync(data).then(function (zip) {
                        return zip.file(zipFile.replace(".zip", "")).async("text"); //gets the file within the zip andoutputs as text
                    }).then(function (txt) {
                        resolve(txt)
                    });

                });
            });
        }
</code></pre>

<p>I'd be happy if either the getZip code could be made synchronous or if the before mentioned could be done.</p>


How do I make a nested loop continue only after a asynchronous function has been resolved or how do I extend ".then" beyond the scope

 在下面的代码中，我试图防止promises出现异步问题。通过使用.then函数，该函数中的所有内容都会在函数解析后被调用。但现在我遇到了一个问题:我既不能将".then函数“的范围扩展到足以包含第二个循环之后的位，也不能根据我的知识轻松地暂停代码，直到函数被正确解析，然后继续循环迭代。 以下是我的主要代码(简化)： ...

问如何使嵌套循环仅在异步函数解析后才继续，或者如何将".then“扩展到作用域之外
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使嵌套循环仅在异步函数解析后才继续，或者如何将".then“扩展到作用域之外EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使嵌套循环仅在异步函数解析后才继续，或者如何将".then“扩展到作用域之外
EN