在jQuery中在多个$ .each循环中使用deferred

Question

我每个循环有三个，这三个循环可能相互依赖，也可能不相互依赖，具体取决于所选的页面级过滤器。共有3个过滤器

if(filter1 is selected) {
  //runs first $.each loop and alters some of custom attr to DOM element  
}

if(filter2 is selected) {
  // Checks if filter1 was selected and are there any attr changes done by it   
  // runs second $.each loop and alters some of custom attr to DOM element   
}

filter3 .... So on

问题是我需要知道filter1中的第一个循环是否已完成其任务，然后仅运行第二个filter循环，以便我可以完美地获得filter1完成的所有attr更改。因此，我尝试使用Deferred对象。下面是我的代码。

var defer = $.Deferred();
if(filter1) {
  $.each()
    .promise
    .done(function(){
      defer.resolve();
      return defer.promise()
    });
}

// same goes for filter2 and filter3

现在我想要选择filter1 [ 执行循环并返回诺言 ]还是未选择[ 返回诺言 ]，然后按照相同的过程进入第二个过滤器。我如何实现它，又如何知道所有3个循环均已完成其执行。 注意：以上过程完全没有ajax调用。

Answer 1

在聚合时使用$.when ， then链接。

function handleFirstFilter(){
    if(firstFilterSelected){
        var ps = [];
        $.each(elements, function(el){
            ps.push(el.animate(...).promise()); // add all the promises
        });
        return $.when.apply($, ps); // aggregate over them
    }
    return $.Deferred().resolve(); // return an empty promise resolved, nothing to do
}
// the other two filters are similar in pattern, can extract it to a function

// now execute them all with each stage waiting for the previous.
handleFirstFilter().then(handleSecondFilter).then(handleThirdFilter)

Answer 2

如果您的阶段仅取决于上一阶段的完成（而不是来自上一阶段的数据），并且三个过滤器处理程序仅在以下方面有所不同：

• 一个特定的布尔状态
• 元素起作用了，
• 要应用于每个元素的asycn函数，

那么您可以编写一个简单的通用handleFilter()函数：

function handleFilter(selected, asyncFn) {
    // return an aggregated promise or null.
    return selected ? $.when.apply(null, $.map(this, asyncFn)) : null;
}

作为书面， handleFilter()必须用所谓的.bind() .apply()或.call()以确定的价值this 。

然后，您将使用handleFilter.bind()生成三个可执行文件，每个可执行文件一个，并将它们传递给handleFilter.bind()链以进行串行执行。

$.when()
    .then(handleFilter.bind(elements_1, firstFilterSelected, asyncFn_1))
    .then(handleFilter.bind(elements_2, secondFilterSelected, asyncFn_2))
    .then(handleFilter.bind(elements_3, thirdFilterSelected, asyncFn_3))
    .then(function() {
        //everything complete
    });

每个阶段都将等待上一个阶段的完成。

Answer 3

“将一些自定义属性更改为DOM元素”

不是异步操作（例如超时，ajax请求或用户交互）。 循环结束时，它将已经执行并完成执行。 从第二个循环中可以观察到所有新的属性值。

您在这里不需要承诺 ，只需按正确的顺序放置同步语句，它们就会被顺序评估。