SetTimeout递归（JavaScript）

Question

The code below recursively plays an audio element and tracks iterations to text, both of which are stopped via a button that clears their timeouts.

If playTimeout is assigned to external function nextThing , when the stop button is clicked the audio will play once more after the text iterations stop. However in the commented (internal) version of playTimeout, the audio stops right away.

Questions: a) why is this happening? and b) how can I properly phrase this so iterations and audio move together?

function nextThing(millis,pitch){
    setTimeout(playTone,millis,pitch);
};
function timedCount(millis){
    document.getElementById('txt').value=iteration;
    playTimeout=nextThing(millis,"C3");     
//  playTimeout=setTimeout(playTone,millis,"C3")
    doRecursion=setTimeout(function(){timedCount(millis)},millis);      
    iteration++;
    console.log("made it");
}

Answer 1

Your nextThing function didn't return anything, the timer id is ignored and it would assign undefined to playTimeout .

function nextThing(millis, pitch) {
    return setTimeout(playTone, millis, pitch);
//  ^^^^^^
}