设置为重复使用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();
}

稍微轻些。