setTimeout（）を使用してJavaScript関数を繰り返し設定すると、ループが終了しても正しくコールバックされません。

Question

最近私はJavaScriptでプロジェクトを作成していましたが、 DarkWavesという名前の2つのアニメーションと、clearScreenという名前の2つのアニメーションを設定しました。私はDarkWavesに関数（例えばclearScreen）を渡すことができるようにしたい、DarkWavesにその処理をさせ、次にそれに渡された関数をDarkWavesに呼び出させたい。残念ながら、私はこれを動作させることはできません。いくつかのテストでは、setTimeout（nameOfTheFunctionThisCodeIsIn、50）をそこに置いた後でコールバックを正しく実行することができないことが明らかになりました。私が得るエラーは：コールバックは関数ではありません。私はtypeofコールバックも無駄に印刷しようとしました：setTimeout（nameOfThe ...なしの関数に置かない限り、私はちょうど定義されています...これは私のコードなしで理解するのはむしろ難しいと確信しています私はここで関連ビットを固執するだろう：私は6500秒待機してから、私はDarkWavesの最後で呼び出したい関数を呼び出して一時的な修正、のビットを設定している

function DarkWaves(callback){//Dark Wave! 

function advancingTriangle(whereToGo, rbgValuez){ 
    ctx.fillStyle = rbgValuez; 
    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(0, whereToGo*50); 
    ctx.lineTo(whereToGo*50, 0); 
    ctx.fill(); 
    } 

if(waveCount === 0){ 
    $('#rightSideBarOuter').hide();//These just clear out some HTML 
    $('#mainAreaOuter').hide();// elements I have over my canvas so that the wave can swim through 
} 

if(waveCount < 30)advancingTriangle(waveCount, 'rgb(0, 0, 0)'); 
if(waveCount > 15 && waveCount < 45)advancingTriangle(waveCount - 15, 'rgb(40, 40, 40)'); 
if(waveCount > 30 && waveCount < 60)advancingTriangle(waveCount - 30, 'rgb(80, 80, 80)'); 
if(waveCount > 45 && waveCount < 75)advancingTriangle(waveCount - 45, 'rgb(120, 120, 120)'); 
if(waveCount > 60 && waveCount < 90)advancingTriangle(waveCount - 60, 'rgb(160, 160, 160)'); 
if(waveCount > 75 && waveCount < 105)advancingTriangle(waveCount - 75, 'rgb(200, 200, 200)'); 
if(waveCount > 90 && waveCount < 120)advancingTriangle(waveCount - 90, 'rgb(240, 240, 240)'); 

waveCount++; 

if(waveCount > 120)waveCount = 0; 

if(waveCount !== 0)setTimeout(DarkWaves, 50); 
else{callback()} 
} 

。コールバックが失われるので、任意およびすべてのヘルプ！

Answer 1

setTimeout(DarkWaves, 50);は、DarkWavesの次の呼び出しに沿ってcallbackを通過させないためにありがとうございました。

あなたはそれを渡す必要があるでしょう：

setTimeout(function() { DarkWaves(callback); }, 50); 

例えば：

if (waveCount !== 0) { 
    setTimeout(function() { DarkWaves(callback); }, 50); 
} else{ 
    callback(); 
} 

かFunction#bindを使用して：もう少し軽量だ

if (waveCount !== 0) { 
    setTimeout(DarkWaves.bind(this, callback), 50); 
} else{ 
    callback(); 
} 

を。