Passing a Javascript Function as Parameter - How Does This Logic Work?

Question

I don't understand how the responseHandler function below is receiving a response from an API call, after a payment form submission. Here is a brief summary of the code:

var PaymentThing = function(e) {
    this["clientCallback"] = e;

    return {
        createToken: function() {
            // HTTP GET URL is generated and then an HTML script element is appended to the page head
            var a = "https://example.com/securitytoken?creditcard=xxxx?callback=PaymentThing.callback";
            var f = document.createElement("script");
            f.src = a;
            document.getElementsByTagName("head")[0].appendChild(f)
        },
        callback: function(e) {
            this["clientCallback"](e.status, e.results)
        }
    }
}


var responseHandler = function(status, response) {
    // How does this even work?
    console.log(response, status);
}


// Form Submission
jQuery('#checkout_payment_form').submit(function() {
    PaymentThing.createToken(responseHandler);
}

So my question is, how does the responseHandler function receive the response from the HTTP GET call? It looks to me like the HTTP call isn't even being made. I only see a URL being added to an HTML script element (with the createToken function), with the URL never even being called/executed (but somehow it is?). Also, how are the (status, response) parameters passed into the responseHandler function when I don't see them being passed into a responseHandler function call?

I don't understand the logic or order of operations here, can anyone please explain what's going on?

EDIT: Ok I think I see now how the responseHandler function is receiving the status and response parameters. I edited the code above to show there's a callback function in the generated HTTP url. But still, how is that URL being called? It still looks to me like it's inert and being stuck into the HTML of the page and not activating.

Are you sure this code does work? There are multiple things wrong with this snippet. — Alex Wayne
– Alex Wayne, Commented May 20, 2020 at 18:37
I think there's likely some piece of code you're missing here. Perhaps f.onload = arguments[0] or something like that? — Heretic Monkey
– Heretic Monkey, Commented May 20, 2020 at 18:38
There is something missing here. Also PaymentThing.createToken(...) would give error — Rishabh Nigam
– Rishabh Nigam, Commented May 20, 2020 at 18:39

Edouard Yonga · Accepted Answer · 2020-05-20 18:44:33Z

2

I think if you run the responseHandler function and store the result in a variable that can be called as a parameter in the PaymentThing.createToken() it will take it in consideration.

answered May 20, 2020 at 18:44

Edouard Yonga

5175 silver badges12 bronze badges

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

Comments

Quentin · Accepted Answer · 2020-05-20 18:37:14Z

1

None of the code there calls responseHandler. There is no point in passing it to the createToken method as it completely ignores all the arguments.

It is possible that the script which is added to the page attempts to call a global function named responseHandler, but there's no way to tell without inspecting the script.

answered May 20, 2020 at 18:37

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

JohnWLIV Over a year ago

Yes, that script that is added does indeed attempt to perform a callback function, which executes the responseHandler function. But why or how would that script actually be executed when it's just added to the page's HTML? Is there a piece of code I'm missing again or does a <script> element automatically run when appended to the page like that?

Quentin Over a year ago

@JohnWLIV — Yes. That's the whole point of a script element: It loads and runs a script.

Collectives™ on Stack Overflow

Passing a Javascript Function as Parameter - How Does This Logic Work?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related