약속 문제 모음

Question

마지막에 수집 할 수있는 일련의 애니메이션에 일련의 약속을 작성하는 구문은 무엇입니까? jquery 매뉴얼을 읽었으며 관련 SO 질문 몇 개를 보았지만 모든 애니메이션이 완료된 후에 .done() 메시지가 표시되지 않는 것 같습니다. 지금까지

코드 :

$.when(

    $graphName.fadeIn(500).promise().then(function(){ 
     $graphaxes.each(function(index) { 
      $(this).delay(500*index).fadeIn(700).promise().then(function(){ 
       $(".circle.bk").each(function(index) { 
        $(this).delay(500*index).fadeIn(700).promise().then(function(){ 
         $graphlabel.each(function(index) { 
          $(this).delay(600).fadeIn(800).promise().then(function(){ 
           fadeLabels(); 
           $(".circle").each(function(index) { 
            $(this).delay(500*index).fadeIn(700).promise();           


           }); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }) 

    ).done(function(){ 
     console.log("All animations complete"); 
    }); 

Answer 1

약속 체인, 당신은해야하고 솔직히 해야하지 둥지 그들을하지 않습니다. 이것은 그 (것)들에있는 힘의 가장 큰 근원이다. 약속에서 돌아와서 체인을 연결하면 .then이 제공 한 내부 약속이 실행됩니다.

$graphName.fadeIn(500).promise().then(function(){ 
    // map each item to a promise, wait for all, if you don't want to wait remove 
    // the $.when.apply around it and return a $.when on the single value 
    return $.when.apply(null, $graphaxes.map(function(i, gi) { 
     return $(gi).delay(500 * i).fadeIn(700).promise(); 
    }).get()); // to get an array 
}).then(function(res){ 
    // now animate all the circles, again if you don't want to wait remove 
    // the $.when.apply so it won't wait 
    return $.when.apply(null, $(".circle.bk").map(function(i, el) { 
     return $(this).delay(500 * i).fadeIn(700).promise() 
    })); 
}).then(function(res){ 
    return $.when.apply(null, $graphlabel.map(function(i, el) { 
      return $(el).delay(600).fadeIn(800).promise() 
    }).get()); 
}).then(function(res){ 
    fadeLabels(); // this calls fadeLabels() once, if you want to call it for 
        // each promise you can of course do it 
    return $.when.apply(null, $(".circle").map(function(index) { 
      return $(this).delay(500*index).fadeIn(700).promise();           
    }).get()); 
}).then(function(res){ 
    console.log("All animations complete"); 
}); 

Answer 2

내가 jQuery를 사용하면 자신의 것을 관리 할 수 ​​$.when()를 사용하지 않아도 전체 컬렉션을 나타내는 약속을 반환하기 때문에 당신이 허용 대답보다 조금 더 간단 그것을 할 수 있다고 생각합니다. 이것은 모두 애니메이트하는 컬렉션에서 호출되는 .promise() 메서드의 정말 멋진 기능 중 하나입니다. 당신이 당신의 진보적 지연에 대해 하나의 jQuery를 플러그인 방식을 만들 경우, 당신은이에 더 많은 코드를 단순화 할 수 있습니다,

$graphName.fadeIn(500).promise().then(function(){ 
    return graphaxes.each(function(i) { 
     $(this).delay(500 * i).fadeIn(700); 
    }).promise(); 
}).then(function() { 
    return $(".circle.bk").each(function(index) { 
     $(this).delay(500*index).fadeIn(700); 
    }).promise(); 
}).then(function() { 
    return $graphlabel.delay(600).fadeIn(800).promise(); 
}).then(function() { 
    fadeLabels(); 
    return $(".circle").each(function(index) { 
     $(this).delay(500*index).fadeIn(700); 
    }).promise(); 
}).then(function() { 
    console.log("all animations complete"); 
}); 

---

을 그리고 : 그래서, 당신이 할 수 있다고 생각

jQuery.fn.fadeInProgressive = function(delayFactor, fadeTime) { 
    return this.each(function(index) { 
     $(this).delay(delayFactor * index).fadeIn(fadeTime); 
    }); 
}; 

$graphName.fadeIn(500).promise().then(function(){ 
    return graphaxes.fadeInProgressive(500, 700).promise(); 
}).then(function() { 
    return $(".circle.bk").fadeInProgressive(500, 700).promise(); 
}).then(function() { 
    return $graphlabel.delay(600).fadeIn(800).promise(); 
}).then(function() { 
    fadeLabels(); 
    return $(".circle").fadeInProgressive(500, 700).promise(); 
}).then(function() { 
    console.log("all animations complete"); 
});