設置為重復使用setTimeout（）重復執行的JavaScript函數在完成循環后無法正確回調

Question

我最近一直在用JavaScript開發一個項目，但遇到了一些障礙。 我設置了兩個不同的動畫，一個叫做DarkWaves，另一個叫做clearScreen。 我希望能夠傳遞DarkWaves函數（例如clearScreen），讓DarkWaves完成其任務，然后讓DarkWaves調用傳遞給它的函數。 不幸的是，我無法使它正常工作。 一些測試表明，在其中放置setTimeout（nameOfTheFunctionThisCodeIsIn，50）之后，我無法使回調正常工作。 我得到的錯誤是：回調不是函數。 我也嘗試過打印typeof回調，但無濟於事：我只是被定義了，除非我將其放在沒有setTimeout（nameOfThe ...）的函數中，否則我肯定沒有代碼很難理解，所以我將相關的信息留在這里：

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()}
}

我已經設置了一個臨時修復程序，它等待6500秒，然后在DarkWaves的末尾調用我要調用的函數。 感謝您提供的所有幫助！

Answer 1

setTimeout(DarkWaves, 50); 不會將callback傳遞給DarkWaves的下一個調用，因此該回調丟失。

您需要通過它：

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();
}

稍微輕些。