2012-07-07 4 views
1

다음 함수로 정의되는 여러 개의 반복 애니메이션 (위/아래)이 있습니다. (위쪽) 간격Interval/setTimeout 시작점

function Cycler(f) { 
    if (!(this instanceof Cycler)) { 
     // Force new 
     return new Cycler(arguments); 
    } 
    // Unbox args 
    if (f instanceof Function) { 
     this.fns = Array.prototype.slice.call(arguments); 
    } else if (f && f.length) { 
     this.fns = Array.prototype.slice.call(f); 
    } else { 
     throw new Error('Invalid arguments supplied to Cycler constructor.'); 
    } 
    this.pos = 0; 
} 

Cycler.prototype.start = function (interval) { 
    var that = this; 
    interval = interval || 1000; 
    this.intervalId = setInterval(function() { 
     that.fns[that.pos++](); 
     that.pos %= that.fns.length; 
    }, interval); 
} 

기능 1

function unpeekTile() { 

    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]); 
    tile1.style.top = "0px"; 
    tile2.style.top = "0px"; 

    peekAnimation.execute(); 
} 

기능 루핑

2 (아래)

function peekTile() { 

    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]); 
    tile1.style.top = "-120px"; 
    tile2.style.top = "-120px"; 

    peekAnimation.execute(); 

} 

시작

 function c() { Cycler(peekTile, unpeekTile).start(); } 
     setTimeout(c, 0); 

     function c2() { Cycler(peekTile2, unpeekTile2).start(); } 
     setTimeout(c2, 500); 

     function c3() { Cycler(peekTile3, unpeekTile3).start(); } 
     setTimeout(c3, 2000); 
,

애니메이션은 이제 1000 (간격 시간) + 0/500/2000 (setTimeout)부터 시작하지만, 0, 500 및 2000 밀리 초로 시작하도록하십시오. 아무도 도와 줄 수 있니?

답변

0

간결한 콜백이 간격에 바인딩 될뿐만 아니라 제한 시간 종료와 간격 설정 사이에 한 번 실행되기를 원합니다.

Cycler.prototype.start을 수정하는 의미

Cycler.prototype.start = function (interval) { 
    var that = this, int_callback; //<-- added var 
    interval = interval || 1000; 
    this.intervalId = setInterval(int_callback = function() { 
     that.fns[that.pos++](); 
     that.pos %= that.fns.length; 
    }, interval); 
    int_callback(); //<-- added line - call the func immediately, once 
} 
+0

I * think는 전역 이름 공간에'int_callback'을 넣을 것입니다. 아마도 거기에'var'을 던지기를 원할 것입니다. – Dancrumb

+0

나는 벌써했다. - 주석 (라인 2)을 보아라. – Utkanos

+0

고맙다 - 나에게 도움이되었다! 약간의 변경 : int_callback var는 별도로 선언해야합니다. var that = this; var int_callback; – Betsy

0

하나의 솔루션은 다음과 같습니다이 유지

Cycler.prototype.start = function (interval,executeImmediately) { 
    var that = this; 
    interval = interval || 1000; 
    var driverFunction = function() { 
     that.fns[that.pos++](); 
     that.pos %= that.fns.length; 
    } 
    this.intervalId = setInterval(driverFunction , interval); 
    if(executeImmediately) { 
     driverFunction(); 
    } 
} 

함수는 한 번 정의 당신은 단순히 setInterval에게 먹이를 직접 호출.

관련 문제