javascript - 了解程序中的执行流程

Question

我正在创建一个在听到拍手声后停止的秒表。我的第一个带有秒表对象的函数应该调用第二个函数 draw，并且应该停留在该函数中，持续监听，直到 vol > 0.3。然后，它应该返回并停止我的秒表。然而，虽然音量似乎有所记录，但我的函数永远不会返回并停止秒表。我不理解执行流程的哪一部分？一旦音量达到绘制函数中的阈值，如何使我的第一个函数停止秒表？

function callStopwatch() {
    var watch = new Stopwatch(timer);
    watch.start();
    if(draw()){
        watch.stop();
    }
}

function draw() {
    let flag = false;
    var vol = mic.getLevel();
    if(vol > 0.2){
        console.log("true"); //created to check whether sound detection is working
        flag = true;
    }
    return flag;
}

Answer 1

我发现您的代码存在三个问题:

1. 您不应从其他函数中调用 draw()。 P5.js 每秒自动为您调用 draw() 函数 60 次。您不应该自己调用它。
2. 您不应从 draw() 函数中返回任何内容。由于 draw() 是自动调用的，而不是由您调用，因此返回值将被忽略。
3. 无论如何，您都不会调用 callStopwatch() 函数。

我认为您可能想重构您的代码。使用 P5.js 流程来发挥您的优势。具体来说，P5.js 在草图开头调用 setup() 函数，并且每秒调用 draw() 60 次。使用该结构来构建您的逻辑。

这是我如何处理它的框架:

var stopwatch;

function setup(){
  stopwatch = new Stopwatch(); 
  stopwatch.start();
}

function draw(){
  var vol = mic.getLevel();
  if(vol > 0.2){
    stopwatch.stop();
  }
}