Javascript: Calling a delayed function inside another delayed function

Question

So, I have a delayed function called delayed1 that gets repeated everytime cond1 is true, the problem is, somewhere inside that delayed1 function do_something1() gets called and if cond3 is true, another delayed function called delayed2 gets called. Now the problem is I want delayed1 to wait until delayed2 is finished (that means until cond2 is false) and then resume again, which doesn't seem to be happening. Once delayed2 gets started, delayed1 doesn't wait for it to finish and then resume. Is there a way to do this? Hopefully I was clear enough...

function delayed2() {
    setTimeout(function () {
       do_something2();
        if ( cond2 ) {
            delayed2();
        }
    }, 1000)
}

function do_something1(){
    if ( cond3 ){
        delayed2();
    }
    else {
        something_else();
    }
}

function delayed1() {
    does_something_here();
    setTimeout(function () {
        do_something1();
        if ( cond1 ){
            delayed1();
        }
    }, 1000)

}

Answer 1

I see what your are trying to do here. You may probably want to approach in a different way. The best way would be to use promises or Deferreds .

Here is the example using jquery deferreds of your given code.

var wait_a_second = $.Deffered();

$.when(wait_a_second)
    .then(does_something_here)
    .then(function(){
        if( cond1 ) delayed1();
    })

    .then(delayed1);


function delayed1(){
    var d = $.Deffered()

    // Your conditions and logic
    if( cond ) {
        d.resolve();
    }

    return d.promise();
}

function delayed2(){
    var d = $.Deffered();

    // Your conditions and logic
    if( cond ) {
        d.resolve();
    }

    return d.promise();
}

In short learn promises to manage async operations queue.

Answer 2

You should use promises to implement synchronous execution in JS.

Promise is a mechanism which returns an object to which you can hook callbacks. These callbacks can be called once a specific function is done with execution. Here is how it applies to your situation.

You generally have 3 functions which depend on each other. The first one should wait for the second and the second one should wait for the third. In the first level the second function should return a Promise .

function delayed1() {

    does_something_here();

    setTimeout(function () {
        var promise = do_something1();

        promise.then(function(){
            if ( cond1 ){
               delayed1();
           }
        });

    }, 1000) 
}

Here is your second function. It creates a promise and returns it. Also inside its if ( cond3 ) it should wait for a promise from the third function. I'm not going to write your third function as I'm certain that you can do it yourself following this pattern.

function do_something1(){

   return new Promise(function(resolve){
       if ( cond3 ){
           var promise = delayed(2);

           promise.then(function(){ 
              resolve()
            }) 

       }
       else {
          something_else();
          resolve();
       }    
   })  


}

Answer 3

You can try using callbacks. Following is a basic representation:

 var count = 0; function delay1(callback) { setTimeout(function() { console.log("Delay 1"); count++; if (count < 12) { if (count % 2 == 0) { delay1(); } else { delay2() } } if (callback) { callback(); } }, 1000); } function delay2(callback) { setTimeout(function() { console.log("Delay 2"); if (count > 10) { delay1(function() { console.log("This is callback;") }) } else if (count % 2 == 0) { delay2(); } else { delay1() } if (callback) { callback(); } count++; }, 1000); } delay1();