약속 및 지연 객체

Question

나는 두 가지 제안 된 방법을 함께 묶었지만 올바르게 작동하는 코드를 얻는 방법을 볼 수 없다는 점을 잘 알고 있습니다.

var animals = ['mouse', 'newt', 'shrew', 'grasshopper', 'frog', 'hedgehog']; 

$('#s1text1').delay(dur).fadeOut(dur).promise() 
.then(function() { 
    return $('#s1text2').fadeIn(dur).promise(); 
}) 
.then(function() { 
    var p = new $.Deferred().resolve(); 
    return $.each(animals, function(i, animal) { 
     p = p.then(function() { 
      return $('.' + animal).fadeIn(defaultDur, function() { 
       animateAnimalGroup(animal); 
      }).promise(); 
     }); 
    }) 
    .then(function() { 
     return $('#s1text2').fadeOut(dur).promise(); 
    }) 
    .then(function() { 
     return $('#s1text3').fadeIn(dur).promise(); 
    }) 
    .then(function() { 
     return $('#s1text4').fadeIn(dur).promise(); 
    }); 

어떤 도움이나 조언을 주시면 감사하겠습니다. 좋은 튜토리얼/기사는 정말로 유용 할 것입니다. 누군가가 하나를 알고 있다면, 나는 약간의 비트를 읽었지만 그 주위에 머리를 쓰려고 고심하고 있습니다.

Answer 1

$.each의 결과를 반환하고 싶지 않은 경우 루프에 누적 된 p 약속을 반환하고 싶습니다. 또한, 닫는 괄호를 누락 :

.then(function() { 
    var p = new $.Deferred().resolve(); 
    $.each(animals, function(i, animal) { 
     p = p.then(function() { 
      … 
     }); 
    }) 
    return p; 
}) 
.then(…) 

Answer 2

Bigwigal, 당신은 명시 적 루프 또는 명시 적 할당/생성 약속의 재 할당을위한 필요없이 당신의 .then() 체인을 구축, array.reduce() 관련된 다른 접근 방식에 관심이있을 수 있습니다. 이제이 무엇

//Data 
var animals = ['mouse', 'newt', 'shrew', 'grasshopper', 'frog', 'hedgehog'], 
    fades1 = [ 
     {id:'s1text1', delay:dur, action:'fadeOut'}, 
     {id:'s1text2', delay:0, action:'fadeIn'} 
    ], 
    fades2 = [ 
     {id:'s1text2', delay:0, action:'fadeOut'}, 
     {id:'s1text3', delay:0, action:'fadeIn'}, 
     {id:'s1text4', delay:0, action:'fadeIn'} 
    ]; 

//Phase 1 (initial fades) 
fades1.reduce(function(promise, item) { 
    return promise.then(function() { 
     return $('#' + item.id).delay(item.delay)[item.action](dur).promise(); 
    }); 
}, $.when()).then(function() { 
    //Phase 2 (animal fades) 
    return animals.reduce(function(promise, animal) { 
     return promise.then(function() { 
      return $('.' + animal).fadeIn(defaultDur).promise().then(function() { 
       return animateAnimalGroup(animal);//you probably want a return here but not necessarily, depending on the visual effect you want. 
      }); 
     }); 
    }, $.when()); 
}).then(function() { 
    //Phase 3 (final fades) 
    return fades2.reduce(function(promise, item) { 
     return promise.then(function() { 
      return $('#' + item.id).delay(item.delay)[item.action](dur).promise(); 
     }); 
    }, $.when()); 
}); 

은 를 데이터 - 구동 된 세부의 부호화 하드 일반화 삼상 애니메이션 패턴이다. 세부 사항을 변경하려면 어레이를 수정하십시오 (animals, fades1 및 fades2).

이 방법은 유용 할 수 있습니다. 최종 결과는 그리 많지 않지만 개발 중에는 만족하기 전에 마음을 수십 번 바꿀 것입니다.

아마도 하나의 배열과 하나의 .reduce()으로 전체 작업을 수행 할 수 있지만 데이터 구조와 코드가 다루기 힘들어 질 수 있습니다.

나는 .reduce() 패턴이 지구상에서 가장 읽을 수있는 것이 아니라는 것에 동의하지만 그것을 배우는 고통의 장벽을 헤쳐 나갈 가치가있다.