Javascript callback’s
10. oktober, 2007
Nu har jeg manglet en god kilde til et minimalistisk javascript callback eksempel i et stykke tid, så jeg har derfor bidt i det sure æble og strukket et sådanne sammen selv.
-
var foo = {
-
fooCallback: null,
-
setCallback: function(callback) {
-
this.fooCallback = callback;
-
},
-
doCallback: function() {
-
with (this) {
-
if (typeof fooCallback == "function") {
-
fooCallback();
-
} else {
-
alert("No foo callback defined.");
-
}
-
}
-
}
-
};
-
-
var bar = {
-
barValue: 42,
-
callback: function() {
-
with (bar) {
-
alert("Success: bar.callback was called!\n"+
-
"And the bar value is " + barValue);
-
}
-
}
-
};
-
-
foo.doCallback();
-
foo.setCallback(bar.callback);
-
foo.doCallback();
Man skal lige have tungen lige i munden med hensyn til binding. Bemærk at der inde i bar.callback ikke benyttes “with(this)” men istedet “with(bar)” for at have rette scope når callback funktionen kaldes fra foo objektet.
Herunder er en udgave der kan have multiple callback registreret, og som tager højde for binding og dermed ”besværliggører” syntaxen for at tilføje callback funktionerne en smule. Det kræves nemlig at .apply( obj ) kaldes på den callback man tilføjer for at binding scope kan gøres irrelevant inde i selve callback funktionen.
-
var foo = {
-
fooCallbacks: [],
-
addCallback: function(callback) {
-
this.fooCallbacks.push(callback);
-
},
-
doCallback: function() {
-
with (this) {
-
var i, c = fooCallbacks.length;
-
for (i = 0; i < c; i++) {
-
if (typeof fooCallbacks[i] == "function") {
-
fooCallbacks[i]();
-
}
-
}
-
}
-
}
-
};
-
-
var bar = {
-
barValue: 42,
-
callback: function() {
-
with (this) {
-
alert("Success: bar.callback was called!\n"+
-
"And the bar value is " + barValue);
-
barValue++;
-
}
-
},
-
callback2: function() {
-
with (this) {
-
alert("Success: bar.callback2 was called!\n"+
-
"And the bar value is " + barValue);
-
}
-
}
-
};
-
-
foo.addCallback(bar.callback.apply(bar));
-
foo.addCallback(bar.callback2.apply(bar));
-
foo.doCallback();