파이어 폭스에 대한 재귀 호출이

Question

EDIT : Firefox에서만 발생합니다! (22.0을 사용하고 있습니다.) 하단의 브라우저 비교를보십시오.

픽셀 데이터를 복사하고 점진적으로 알파 값을 255에서 0으로 변경하면 (배경이 검은 색) 캔버스에 '검은 색 페이드'효과를 만들려고합니다.

function fadeToBlack() { 
    if(typeof this.recursion === 'undefined' || this.recursion === 0) { 
     this.recursion = 1; 
     this.imageData = this.ctx.getImageData(0, 0, this.width, this.height); 
     this.imageDataArray = this.imageData.data; 
     this.pixelCount = this.imageDataArray.length/4; 
     this.fadeToBlack(); 
    } 
    else if (this.recursion <= 15){ 
     console.time('Change alpha ' + this.recursion); 
     for (var i = 0; i < this.pixelCount; i++){ 
      this.imageDataArray[i * 4 + 3] = 255 - 255/15 * this.recursion; 
     } 
     console.timeEnd('Change alpha ' + this.recursion); 
     this.ctx.putImageData(this.imageData, 0, 0); 
     this.recursion++; 
     setTimeout(function(){ 
      this.fadeToBlack(); 
     }.bind(this), 50); 
    } 
    else { 
     this.recursion = 0; 
    } 
}; 

나는 (! 1280 * 1024 = 1310720 반복)이 정말 비싼 것이라고 생각하지만, 아래의 콘솔 로그에서 볼 수 있듯이, 그것은 첫 번째 반복을 제외하고 놀라 울 정도로 빨랐다. 단순히 fadeToBlack (화소 조작 첫번째 반복)의 두 번째 반복 ... 지연 경우

Change alpha 1: 543ms 
Change alpha 2: 16ms 
Change alpha 3: 6ms 
Change alpha 4: 16ms 
... 

이상하게 마법

function fadeToBlack() { 
    if(typeof this.recursion === 'undefined' || this.recursion === 0) { 
     this.recursion = 1; 
     this.imageData = this.ctx.getImageData(0, 0, this.width, this.height); 
     this.imageDataArray = this.imageData.data; 
     this.pixelCount = this.imageDataArray.length/4; 
     //This is the only difference! 
     setTimeout(function(){ 
      this.fadeToBlack(); 
     }.bind(this), 0); 
    } 
    else if (this.recursion <= 15){ 
     console.time('Change alpha ' + this.recursion); 
     for (var i = 0; i < this.pixelCount; i++){ 
      this.imageDataArray[i * 4 + 3] = 255 - 255/15 * this.recursion; 
     } 
     console.timeEnd('Change alpha ' + this.recursion); 
     this.ctx.putImageData(this.imageData, 0, 0); 
     this.recursion++; 
     setTimeout(function(){ 
      this.fadeToBlack(); 
     }.bind(this), 50); 
    } 
    else { 
     this.recursion = 0; 
    } 
}; 

뭔가 일어난다.

Change alpha 1: 16ms 
Change alpha 2: 16ms 
Change alpha 3: 6ms 
Change alpha 4: 6ms 
... 

그래서 도대체 무슨 일이 벌어지고있는거야?

EDIT : 나는 여러 브라우저에서이를 테스트했으며, 15 회 반복마다 밀리 초 단위로 결과를 보았습니다.

Browser |Recursive |Asynchronous 
=========+===========+============ 
Firefox |1652†  |1136 
Chrome |976  |978 
Opera |12929  |13855 
IE  |855  |854 

첫 번째 반복 매우 비용 (500ms로)이었다 †.

Answer 1

나는 함수가 죽을 때까지 (setTimeout을 사용하여 비동기 호출을 사용할 때) 한 번만 호출하기 때문에 함수 사이의 점프를 절반으로 줄인다 고 생각하지만, 내부에서 호출하여 재귀를 사용하면 그 시점에서 중단됩니다 마지막 호출이 끝날 때까지 다음 호출로 점프하는 등 점진적으로 재귀를 수행하여 재귀에서 반환 된 값을 사용하여 계속 진행하고 이전 함수로 돌아가려면 중지 된 줄에서 이전 함수를 호출합니다. 실적 및 방법론에서 입찰가 차이를 볼 수 있습니다. 나는 그것이 당신에게 내가 의심 할 수없는 동일한 결과를 주는지 물어보아야한다.

TL, DR setTimeout : 비동기 호출 (독립), 재귀 : 동기 (종속).

그래픽 데모 :

이상하다,하지만 당신은 당신이 함수는 비동기 실행하고 있습니다에서는 setTimeout 사용하면 현재 함수 실행 큐에서 다음 호출을 넣는 동안 작업을 계속합니다