Call a custom function when a third party javascript async function completes its execution

Question

I have a scenario where I would like my function to be executed after a particular 3rd party js function completes its execution.

I can't edit the source of loadOne however I could add/override my newLoadOne as on click listener. So I can execute the loadOne on its behalf and execute my code with the data it returns.

Right now, my newLoadOne prints console.log before the loadOne method's async callback return.

HTML

<select id="option1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<select id="option2">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

<input id="submit" type="button" value="Submit" />

JavaScript

function loadOne(){
    someAsyncXhrMethod(with_its_own_parameters);//its own xhr method with aync callbacks 
}


function newLoadOne(){

    (function(){loadOne(); console.log('done');}());
}

function optionschanged(){
    console.log('options changed');
}

function bEvents(){
    $('#option1').change(optionschanged);
    $('#option2').change(optionschanged);
    $('#submit').bind('click', newLoadOne); //this is where i replace the call to loadOne with my newLoadOne
}

$(document).ready(function () {
    console.log('ready');
    bEvents();

});

here is the jsFiddle link - Note: $.ajax call in the source is to explain the method loadOne has some async callbacks. So $(document).ajaxComplete is not the answer.

Unfortunately if the author of the library hasn't made this possible then there's nothing you can do about it (except bug them to fix their mistake). But why can't you edit the source? — Jivings
– Jivings, Commented Jun 22, 2013 at 19:03
We'd need to know more about the original loadone works i think... To see if there is something we can hook in to... — prodigitalson
– prodigitalson, Commented Jun 22, 2013 at 19:09
@Jivings ajaxComplete works only if the 3rd party method uses jquery in my case it is not. — palaniraja
– palaniraja, Commented Jun 22, 2013 at 19:12
If the subject function does not return a promise and the asych operation is not jQuery.ajax, then you are very very stuck. I'm not saying impossible, but one would need to know a lot more before being able to advise. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Jun 22, 2013 at 19:16

score 2 · Accepted Answer · 2013-06-28 20:49:19Z

2

You have no real choice but to poll to see if the async method has completed. Presumably it does something that changes a state which is visible to you that you can poll for (we'll call that routine check_some_async_xhr_method_completed), at some appropriate frequency.

function newLoadOne () {
    loadOne (); 
    check_completion (function (completed) {
        console.log (completed ? 'done' : 'never finished');
    });
}

function check_completion (callback) {
    var number_of_tries = 20;
    var timer = setInterval (
        function () {
            if (check_some_async_xhr_method_completed ()) {
                clearInterval (timer);
                callback (true);
            } else if (!number_of_tries--) {
                clearInterval (timer);
                callback (false);
            }
        },       
        500
    );
}

Or, if you would prefer to use promises:

function newLoadOne () {
    loadOne (); 
    check_completion ().then (
        function () {console.log ('done'),
        function () {console.log ('never finished')
    );
}    

function check_completion () {
    var promise = Promise.new();
    var number_of_tries = 20;
    var timer = setInterval (
        function () {
            if (check_some_async_xhr_method_completed ()) {
                clearInterval (timer);
                p.fulfill ();
            } else if(!number_of_tries--) {
                clearInterval (timer);
                p.reject ();
            }
        },       
        500
    );
    return promise;
}

Or, the when library already has a routine which handles polling.

edited Jun 28, 2013 at 20:49

answered Jun 28, 2013 at 20:24

user663031

Sign up to request clarification or add additional context in comments.

1 Comment

palaniraja Over a year ago

Thank you for the answer. I xhr method in question is actually updating the list (html select tag) with new options, I had to reformat the display string of each options, issue with Set/clear Interval routine is people will notice the change in anyway (if xhr completed before the next interval call. Handling options update is definitely different SO question. And DOMSubtreeModified is deferred :(

Jivings · Accepted Answer · 2013-06-22 19:20:42Z

0

It seems to me like this would work...

$(document).ajaxComplete(function (event, xhr, settings) {
  if ( settings.url === "the/url/that/loadone/uses" ) {
    // do your callback here
  }
});

Sorry, this only works when the request is made using jQuery.

edited Jun 22, 2013 at 19:20

answered Jun 22, 2013 at 19:11

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

2 Comments

prodigitalson Over a year ago

Will that work? He's not using the jQuery ajax functionality so will this handler ever be called? Does it actually apply to non-jquery XMLHTTPRequests?

Jivings Over a year ago

@prodigitalson I actually have no idea and can't find a reference that specifies. I'll mock up a demo.

Collectives™ on Stack Overflow

Call a custom function when a third party javascript async function completes its execution

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related