How to cancel a function which was called by another function

Question

I call a function:

$(document).on('click', '#home', function() {
    runfunction2('', ''); // for stopping speech
    runfunction( 956, 0 );
})

from this function I call another function with speech. (https://github.com/vilic/cordova-plugin-tts)

function runfunction( post_id, step ){
    runfunction2('example text', 'starttimer', post_id, step );
}

function runfunction3( text, end, post_id, step ){
 TTS.speak({
    text: text,
    locale: 'de-DE',
    rate: 1.5
}, function () {

    if ( end == "startrec" ) {
        console.log("startrec gestartet");              

        mediaPlay3.play();

        setTimeout(function() {
            mediaPlay3.stop();      
            startRecognition( post_id, step );          
        }, 1000); 

        setTimeout( function(){ 
            // Do something after 3 second 
            stopRecognition();  
        }  , 4000 );    
    } else if ( end == "newtry" ){
        console.log("newtry gestartet");

        mediaPlay3.play();

        setTimeout(function() {
            mediaPlay3.stop();          
            startRecognition( post_id, step );          
        }, 1000); 

        setTimeout( function(){ 
            // Do something after 3 second
            stopRecognition();
        }  , 4000);                 
    } else if ( end == "starttimer" ){
            timer(post_id, step );
    } else {
        //
    }
}

If I click during the process the home-button again I want to start it from the beginning. The problem is that the first function is not yet finished and is running in the background (still calling the second function). But I want to cancel it all and let everything run from the beginning. How is that possible?

Answer 1

below codes is simulate thread and you can use this code for this. HTML:

<button type="button" class="btn btn-primary" id="btnStart">Start</button>
<button type="button" class="btn btn-default" id="btnCancel">Cancel</button>

JS:

$(document).ready(function () {
    $('#btnStart').on('click', infinityFunction);
    $('#btnCancel').on('click', cancelProcess);

});
var busy = false;
var cancelled = false;

var processor = [];
var countN = 0;
function infinityFunction() {
    if(cancelled){

        if(processor.length > 0){
            clearTimeout(processor[0]);
            processor.splice(0,1);
        }
        busy = false;
        cancelled = false;
        countN = 0;
        return;
    }
    if(!busy) {
        busy = true;
        console.log('Processing some code :'+countN);
        countN++;
        if(processor.length > 0){
            clearTimeout(processor[0]);
            processor.splice(0,1);
        }
        var myProcessor = setInterval(infinityFunction, 1000);
        busy = false;
        processor.push(myProcessor);
        console.log(processor);

    }else{
        console.log('I am busy now');

    }

}

function cancelProcess() {
    cancelled = true;
}