Force code to execute after another method finishes executing

Question

Here is what I want to do:

setSource is a function which executes about 3 seconds.

 editor.setSource();

 setTimeout(function () {
      //do something, some commands
 }, 3000);

I want the //do something, some commands part to be executed AFTER the last line of setSource() is executed. Now I'm doing it with setTimeout, but I think it's not very good solution, because sometimes setSource() will take maybe 5 seconds to execute. How to do this?

Can you use jquery? They have deferred objects which does this easily. If not you could make your own callback — Jeff Shaver, Mar 12 '13 at 11:52
Meaning, pass the function in as a variable and then run it at the end of the function, passing variables into it as needed. http://stackoverflow.com/questions/2190850/create-a-custom-callback-in-javascript — Jeff Shaver, Mar 12 '13 at 11:53
You can refer: http://stackoverflow.com/questions/4866721/what-are-deferred-objects — Milan, Mar 12 '13 at 11:56
Deferred Objects: http://api.jquery.com/category/deferred-object/ — Jeff Shaver, Mar 12 '13 at 11:56

Waleed Khan · Accepted Answer · 2013-03-12T12:09:02.550

Have setSource take a callback argument:

editor.setSource = function(callback) {
    // do editor things
    callback();
}

Then pass the next block of code to be executed as a callback:

editor.setSource(function() {
    // do some other things
});

If you have access to jQuery's deferred objects, you can make use of them here:

Make a new deferred object.
Start the timeout to do your long task.
Return the deferred object.
In the timeout, once the task is complete, call deferred.resolve.

editor = {
    setSource: function() {
        var deferred = $.Deferred();

        console.log("Beginning editor.setSource...");

        setTimeout(function() {
            // This function took a while to occur
            deferred.resolve();
        }, 3000);

        return deferred;
    }
}

$.when(editor.setSource()).then(function() {
    console.log("Editor is done!");
});

If you're doing AJAX or animation or another jQuery task that uses deferred objects already, you can just return its result value instead of making your own deferred object:

editor = {
    setSource: function() {
        return $.get({
            url: "myurl.com/mypage",
            data: $("#myform").serialize()
        });
    }
}

$.when(editor.setSource()).then(function() {
    console.log("Editor is done!");
});

Make sure to look up how you can either resolve or reject deferred objects, and how to handle those.

No reason for the setTimeout if he is going to use callbacks — Jeff Shaver, Mar 12 '13 at 11:54
@JeffShaver I assume he had something that took 3 seconds, which is what I'm pretending exists. — Waleed Khan, Mar 12 '13 at 11:54
@JeffShaver I assumed he had some asynchronous task in his `setSource` function, so I further assumed that it was a `setTimeout` call or something. — Waleed Khan, Mar 12 '13 at 11:58

Domysee · Answer 2 · 2015-10-01T21:05:41.633

This answer uses `promises`, a JavaScript feature of the `ECMAScript 6` standard. If your target platform does not support `promises`, polyfill it with PromiseJs.

In newer browser versions you can use ES6 promises. editor.setSource() wraps its execution into a Promise and returns it, so it can be continued with other functions.

editor.setSource = function(){
    return new Promise(function(fulfill, reject){
        //do your work
        fulfill(resultValue);
    });
};

To continue it with another function simply use the then method on the promise.

var promise = editor.setSource();
promise.then(function(result){
    //do something more
});

score 0 · Answer 3 · edited Jul 05 '17 at 14:02

I was also looking for solution where I want to execute my second function only after previous function gets executed completely, I tried callback function but still not getting the solution, finally I find the very easiest way to resolve this issue by using simple $.ajax({ }); method code which works for me :).

for example,

$.ajax({
  url: function1(),
  success: function(){
    //function 2 code here or just call function2() here
  }
});

that's all, in this code url parameter will call first function and only on the success of its execution function 2 will be called.

Force code to execute after another method finishes executing

3 Answers3

This answer uses promises, a JavaScript feature of the ECMAScript 6 standard. If your target platform does not support promises, polyfill it with PromiseJs.

This answer uses `promises`, a JavaScript feature of the `ECMAScript 6` standard. If your target platform does not support `promises`, polyfill it with PromiseJs.