I was facing a problem with callbacks in Javascript. I solved my problem using what I would call an ugly property of Javascript (so to say, something that would logically be forbiden and never work in other languages than Javascript). So my question: Is there an ELEGANT way, to do the same thing.
I will so begin with the beginning. My goal was to wrap, in some manner, the Web Audio API. In the architecture, I implemented a class, lets call it AudioRessource, which is destined to be an interface (abstraction) in some manner of the AudioBuffer object of the Web Audio API.
This class (AudioRessource) have a prototype member function that must simply take an url as argument to automatically load audio data, decode it, handle errors, etc and finally hold the resulting AudioBuffer object in a "pseudo-private" member:
function AudioRessource()
{
this._aBuffer = null; // future reference to `AudioBuffer` object
this._loadStatus = 2;
};
AudioRessource.prototype.loadData = function(url) {
/* deal here with async functions to
provides audio data loading automation */
}
The main problem here, is that this will be an object instance (of AudioRessource) which will create the callback functions, using only local references, and must be able to pass the final AudioBuffer object to itself.
To load the raw audio data, this is pretty simple, I use the XMLHttpRequest object, with an extra property set as member of the XMLHttpRequest object, like this:
AudioRessource.prototype.loadData = function(url) {
let req = new XMLHttpRequest();
req.extraProperty = this; // reference to `AudioRessource` instance
req.onload = function(){
// retrive instance reference within the callback
this.extraProperty._loadStatus = 0;
}
req.onerror = function(){
// retrive instance reference within the callback
this.extraProperty._loadStatus = -1;
}
req.open('GET', url, true);
req.send(null);
this._loadStatus = 1;
}
The big problem appear when we have to decode the coded raw audio data into PCM data, that is, an Web Audio API AudioBuffer object instance. Indeed, the Web Audio API provides only one function to achieve this, and this function is asynchronous, and takes a callback that simply recieve the resulting buffer as argument: how to "catch" this resulting buffer to assign it to the proper AudioRessource instance (the one who lauched the process) ? This work that way:
AudioCtx.decodeAudioData(rawData,
function(result){
// do something with result },
function(error){
// do something with error });
My first naive approach, was to think like we were in C/C++ : I simply put an AudioRessource instance function "pointer" (reference) as callback, this way, the AudioRessource instance will directly recieve the buffer:
// where 'this' is an `AudioRessource` instance
AudioCtx.decodeAudioData(rawData,
this._handleDecodeSuccess,
this._handleDecodeError);
However, this does not work, because in javascript, this is not a "function pointer" that is passed into the decodeAudioData, but if I well undstand, an literal expression, that is, the "ASCII content" of the function... So the 'this' reference is lost !
I spent some time to try understand how this kind of asynchronous function is attended to work, since to me, coming from C/C++, this is simply an heresy: The function does not take any extra argument, no way to pass any external reference... "What is that thing ?". Then I finaly decided to try the "Illogical Javascript logic" way... And I found the solution :
// Create local variable which stores reference to 'this'
let thisInstReference = this;
// Use the local variable to write our callback
AudioCtx.decodeAudioData(rawData,
function(resut){
thisInstReference._aBuffer = result;
thisInstReference._loadStatus = 0;
},
function(resut){
thisInstReference._loadStatus = -3;
});
To be honnest, to me, this is simply freaking. First of all, I even don't understand what realy happen: HOW a local variable (to a object instance's member function), that stores a reference to an object instance (this), can be used "as this" in a callback function ? I do not even understand how a language can allow this kind of thing. Secondly, to me, this not a "proper way" to code something: this code is simply illogical, dirty, this works but this appear as an ugly hack that takes advantage of Javascript misdesign.
So here is my question: How to achieve this, in a elegant way ?
Your problem is simply due the the nature of how this works in javascript. The value of this is not bound at compile time nor at runtime but instead very late at call time.
In the following code:
AudioCtx.decodeAudioData(rawData,
this._handleDecodeSuccess,
this._handleDecodeError);
.. the value of this inside _handleDecodeSuccess and _handleDecodeError is not determined at object creation time but instead at the time they are called. And it is the decodeAudioData method that will eventually call them when decoding is complete. This causes the value of this to become something else (depending on how the functions are called).
The modern solution is to statically bind this to the functions:
AudioCtx.decodeAudioData(rawData,
this._handleDecodeSuccess.bind(this),
this._handleDecodeError.bind(this));
Note: the .bind() method creates a new function that wraps your function with this permanently bound to the argument you pass to it.
The traditional solution is to capture this inside a closure like what you have done.
In QML, I'm using a C++ library that returns a QObject that does a process and emits a signal when is done. In javascript, I use the connect method of the signal being emitted (success) to attach an anonymous function that should handle the signal as the following piece of code shows:
var requestResponse = apiClient.execute(reqInp);
requestResponse.success.connect(function success(response)
{
var requestResponseJSON = JSON.parse(response.responseAsJsonString());
this.append(response.responseAsJsonString());
});
My problem is that sometimes the QML item that contains this method is destroyed before the C++ code being able to complete, so when the signal is emitted, the anonymous function causes an error, because it calls methods that are undefined (in my example, the method append). I have some nasty crashes in iOS and I suspect that this is what might be causing it.
Is there a way of force disconnection of the signal when the object that created the function is destroyed?
var requestResponse = apiClient.execute(reqInp);
function myFunction(response)
{
var requestResponseJSON = JSON.parse(response.responseAsJsonString());
this.append(response.responseAsJsonString());
}
requestResponse.success.connect(myFunction);
requestResponse.destroyed.disconnect(myFunction)
I am having problems getting a reference to a javascript object implemented with the
prototype pattern within a callback. The callback is from a 3rd party component
I utilize within my object. The 3rd party object connects to a message bus.
The following pseudo code shows how I started (The real code for this is working)
var mb = require('MsgBus')
TestClass = function() {
this.messagebus = new mb.MsgBus();
this.messagebus.connect(function(err) {
if(err)
console.log("Error connecting");
else
console.log("Connected");
});
}
But then I wanted to have it automatically retry connecting if the callback reports
an error. I cannot just put another line if the if(err) block that
says "this.messagebus.connection" because I would have to add another anonymous
method for that connect callback and it would just go on and on. So, I want to
split out the callback logic to a named function like this
var mb = require('MsgBus')
TestClass = function() {
this.messagebus = new mb.MsgBus();
this.messagebus.connect(msgBusConnectCallback);
}
function msgBusConnectCallback(err) {
if(err)
this???.messagebus.connect(msgBusConnectCallback);
else
console.log("Connected");
});
}
The callback function gets called, but I cannot figure out how to get a reference
to the object to call connect again. I've also tried to make the callback a
prototype function of the object, still no reference. I cannot create a variable
in the global scope to maintain "this" because the user of this class may
create multiple instances of the class. I am fairly new to JavaScript so I don't
know if I'm just missing something or if I need to take a different approach
altogether. I would appreciate any help and/or direction.
this.messagebus.connect.apply(this, [msgBusConnectCallback]);
I finally figured out the answer, the correct syntax is
this.messagebus.connect(msgBusConnectCallback.bind(this));
I am new to JSONP and had implemented cross domain functionality for my application and everything is working fine. Now i want to change my javascript code to apply object orientation.
My api is
http://localhost:8080/myApplication/getComments?callback=displayComments
CrossDomain.prototype.displayComments = function(data) {
// code to display the comments
}
Now I am getting an error in firebug given below
ReferenceError: displayComments is not defined
I changed the api to
http://localhost:8080/myApplication/getComments?callback=this.displayComments
and found that the function is appended inline to the callback like this
http://localhost:8080/myApplication/getComments?callback=callback=function (jsonData)
{
//code to display the comments
}
this time another error in firebug
SyntaxError: function statement requires a name
I have a doubt whether to use JSONP in object oriented javascript or not.
Please help.
Thanks in advance.
There's no point in defining the function on the prototype of a function unless you are going to create instances of that function, so start by doing that.
var myCrossDomain = new CrossDomain();
Then you have to call the method on the object, not as a global (it isn't a global, so you can't do that anyway)
var uri = "http://localhost:8080/myApplication/getComments?callback=" +
encodeURIComponent("myCrossDomain.displayComments");
In response to edits and comments:
Yes i am creating an instance of this in another js file
Then reference it as shown above.
I changed the api to
http://localhost:8080/myApplication/getComments?callback=this.displayComments
It's JSON-P. It runs by adding a new script element. Everything gets called in the global context. That is going to call this.displayComments which will be the same as window.displayComments.
If you want to call your method directly, then you need to specify the global variable holding the instance explicitly.
If you don't want to call it directly then you can use the more traditional approach of generating a new, anonymous function which has access to said object through a closure, assigning that function to a global variable (with a unique name) and using that name as your callback argument.
and found that the function is appended inline to the callback like this
http://localhost:8080/myApplication/getComments?callback=callback=function (jsonData)
You haven't shown us the code that creates the URI so we can't tell why that might be the case.
What I'm trying to do is to get a list of calendars from google, and then get the list of events from each calendar.
So basically I'm calling the events.list method within the callback function for the calendarList.list method.
However, when debugging using Firebug, it appears that the callback function for the events.list method just doesn't get called at all.
var request2 = gapi.client.calendar.events.list({
"calendarId":calendarId
});
request2.execute(function(response2) {
resp2 = response2;
findEvent();
});
I can debug up to request2.execute, but function(response2) is never performed.
resp2 is a global variable, and all of this code is in a function called from the first request's callback.
A very similar code works perfectly for the first call, with a different global variable.
I've tried removing either of the lines in the callback to no effect.
Thanks for any help.