了解程序中的执行流程

Question

我正在制作一个秒表，它会在听到掌声后停止。我使用秒表对象的第一个函数应该调用第二个函数 draw，并且应该留在那个函数中，持续监听直到 vol > 0.3。然后，它应该 return 并停止我的秒表。然而，虽然音量似乎在记录，但我的函数从不 returns 并停止秒表。我不理解执行流程的哪一部分？一旦音量达到绘制函数中的阈值，如何让我的第一个函数停止秒表？


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

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

您不应从其他函数调用 draw()。 P5.js 每秒自动为您调用 draw() 函数 60 次。你不应该自己调用它。
你不应该 return 来自 draw() 函数的任何东西。因为 draw() 是自动调用的，而不是由您调用的，所以 return 值将被忽略。
你永远不会调用你的 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();
  }
}

了解程序中的执行流程

Understanding flow of execution in a program

javascript

p5.js