有没有可能异步调用 jquery .each 方法？答案

【问题标题】：Is there any possible to call jquery .each method asynchronous?有没有可能异步调用 jquery .each 方法？
【发布时间】：2013-07-15 19:03:33
【问题描述】：

好的，我有这个小脚本。

var parent_li = $('ul.list').find('li');
parent_li.each(function(){
    var dmy_checkb = $(this).find('.dmy_checkb'),
        true_inpt = $(this).find('input');
    dmy_checkb.trigger('click');
    true_inpt.attr('checked','checked');
});

这是某种虚拟复选框功能 - 它添加了特定的类和属性。一切正常。问题仅在于请求的数量，仅在对所有元素执行该函数时才添加类和属性，所以如果我有它们 300 需要相当长的时间，是否有机会单独异步调用此方法每个元素？谢谢帮助。

【问题讨论】：

不，.each 不能这样做。您必须使用setTimeout 并逐步处理每个元素（或元素集）。看看这个关于原生.forEach的问题：stackoverflow.com/q/5050265/218196。
异步是指多线程？
@FelixKling 感谢您的帮助，setTimeout 可能会有所帮助，BR

标签： javascript jquery asynchronous each

【解决方案1】：

不，每个方法都不能是异步的，因为它是同步的，像 for 循环一样工作：它从第一个元素开始，然后是第二个......直到最后一个。

【讨论】：

【解决方案2】：

查看 Node.js 的异步库。您可以使用async.each。 https://caolan.github.io/async/docs.html

【讨论】：

【解决方案3】：

是的，你可以！

虽然 each 方法不是异步的，但您可以使用 IIFE（立即调用的函数表达式）或 Promise 异步处理内部的内容。检查 Promises 代码的 sn-p。

基本上，您可以在每个循环迭代中实例化一个 Promise（或 IIFE）。如果您需要在每个循环内的代码块中检查计算值，Promise 和 Promise.all 会让您更轻松，而不是处理 IIFE 回调。

如果您不需要在 Promise 中处理已解析的值，请使用 IIEF 或“免费”Promises，而无需将它们放入要使用 Promise.all 排序和检查的数组中。

PS:Promise 需要最新的 JS。

var ulList = $('ul.list');
var btn = $('#btn');
var timeoutOption = $('#useTimeout');

btn.on('click', function(){
  processAsync(timeoutOption.is(':checked'));
});

for(var i = 300; i > 0; i--){
  ulList.append(
    $('<li>').text(i).append(
      $('<div class="dmy_checkb">').on('click', function(){
          $(this).addClass('clicked');
        }),
      $('<input type="checkbox">')
    )
  );
}



function processAsync(_timputOption){
  
  console.log('processAsync called', _timputOption); 

  var parent_li = $('ul.list').find('li');
  
  var clickedPromises = [];
  
  parent_li.each(function(){
  
      var dmy_checkb = $(this).find('.dmy_checkb');
      var true_inpt = $(this).find('input');
          
      
      clickedPromises.push(
        new Promise(function(resolve, reject){
            
            var randomTimeout = 0;

            if(_timputOption){
              randomTimeout = Math.floor(Math.random() * 3) + .2;
            }
            //this timeout is only to prove that processing is async
            
            setTimeout(function(){

              dmy_checkb.trigger('click');
              true_inpt.attr('checked','checked');

              resolve(true_inpt.attr('checked'));
            }, randomTimeout*1000);

        })
      
      );
      
  });
  
  
  //this is called immediatly after the each loop... before all promises are done to show you that your code will continue immediately without waiting for each Promise to finish their work.
  ulList.addClass("orange");
  
  //Promise.all runs after all the array of promises finished its computation
  Promise.all(clickedPromises).then(function(values){
    //called after all promises have been resolved. You can inspect each result in the order has they have been produced 
      //console.log(values);
  });
  

}

ul.list{
  position:absolute;
  top:0;
  bottom:0;
  margin:20px;
  margin-bottom:10%;
  display:inline-block;
  border:1px solid blue;
  overflow:auto;
}

ul.list > li{
  padding:5px;
}

ul.list.orange{
  background-color:orange;
}

#actionBox{
  position:absolute;
  top:0;
  left:0;
  left:100px;
  
  margin:20px;
}

.dmy_checkb{
  border:1px solid lightgray;
  border-radius:4px;
  background-color:lightblue;
  width:16px;
  height:16px;
}
.dmy_checkb.clicked{
  background-color:blue;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list"></ul>

<div id="actionBox">
  <label for="useTimeout">use timout</label>
  <input type="checkbox" checked name="useTimeout" id="useTimeout">
  <button id="btn">process async</button>
</div>

【讨论】：