Javascript bind event handler of another function activating / ending - javascript

In Javascript, is there some way to bind and event handler of one function activating and ending?
So, for instance, I have two functions:
function one() { console.log("this is function one") }
and
function two() { console.log("this is function two") }
I want function two to activate both when function one is called and when it ends. Obviously, I could just:
function one() { two(); console.log("this is function one"); two() }
but that'd be boring -- not nearly as interesting as this way.

Well, you could write a function that wraps the original function in another that calls the callback.
function bindStartEnd(originalFn, callback, thisArg) {
return function() {
var returnValue;
callback();
returnValue = originalFn.apply(thisArg || null, arguments);
callback();
return returnValue;
};
}
It could be used like this:
function one() {
console.log("This is function one");
}
function two() {
console.log("This is function two");
}
var three = bindStartEnd(one, two);
three();
And it could be extended to also accept two callbacks, one for the beginning and one for the end. You might also think of a better name.

Related

How to implement a callback in Javascript onload event

I really don't understand... I'm a beginner in Javascript.
I have attached my function onLoadDocument to the document.onload event.
The callback function absolutely have to be executed after function111() and function222() have totally finished their job.
Actually, the callback is executed too soon and it causes a problem to function111 and function222.
How to execute the callback function ONLY when function111 and function222 will have finished their job?
function onLoadDocument(event, callback) {
function111();
function222();
callback();
}
function after() {
firstOpeningWindow = false;
}
document.onload = onLoadDocument(event, after);
The issue is that a callback is a function reference, but this line:
onLoadDocument(event, after)
is a function invocation and therefore runs immediately. Also, it's window that has a load event, not document.
function onLoadDocument(callback) {
function111();
function222();
callback();
}
function after() {
firstOpeningWindow = false;
}
// You have to supply a function reference here. So, to pass arguments
// you'd need to wrap your function invocation in another function that
// will be the callback
window.onload = function() { onLoadDocument(after) };
The problem is that window.onload (as a commenter on another answer said,, document.onload doesn't exist) takes a function, which is executed when the event happens. You're not passing in a function here, you're passing in the return value of onLoadDocument(event, after). This is undefined - and to get that, the browser is executing the function, which is too early for you.
The solution is just to have onLoadDocument return a function:
function onLoadDocument(event, callback) {
return function () {
function111();
function222();
callback();
}
}
function after() {
firstOpeningWindow = false;
}
window.onload = onLoadDocument(event, after);
The function is called when you call the function, so:
document.onload = onLoadDocument(event, after);
… calls onLoadDocument immediately and assigns the return value to onload (which is pointless because the return value is not a function).
If you want to take this approach, then you need to write a factory which generates your onload function using a closure:
function onLoadDocumentFactory(callback) {
function onLoadDocument(event) {
function111();
function222();
callback();
}
return onLoadDocument;
}
function after() {
firstOpeningWindow = false;
}
document.onload = onLoadDocument(after);
That said, it would be easier just to add your functions in order using the modern addEventListener.
function function111() {
console.log(111);
}
function function222() {
console.log(222);
}
function after() {
console.log("after");
}
addEventListener("load", function111);
addEventListener("load", function222);
addEventListener("load", after);

Cleaner callbacks in JavaScript

If I want to break a callback implementation out of a method's parameter footprint for cleaner code I can do (for example)
foo.bar(a, callback(), b);
function callback() {
stuff;
}
instead of
foo.bar(a, function() {
stuff;
}, b);
But what do I do if the method passes something into the callback like three.js's loader functions? (http://threejs.org/docs/#Reference/Loaders/OBJMTLLoader)
foo.bar(callback(object));
function callback(object) {
object.stuff();
}
doesn't seem to work.
Got it. The format should be:
foo.bar(callback);
function callback(object) {
object.stuff();
}
The 2 snippets you've posted are actually different - when you pass an anonymous function as an argument it isn't run immediately, but in the "foo.bar" function itself. However, when you pass it as "callback()", that function runs immediately (it is useful in some cases, for example: if the function returns another function). So, pass it without "()".
For example:
function a(){
alert(1);
}
function b(callback){
callback(); //run the callback function.
}
b(a);
And, if you want to see an example of the second option:
function a(){
return function() {
alert(1);
};
}
a()(); //Alert
b(a()); //Alert
b(a) //nothing happens

Make a function that can perform multiple callback with one parameter

I'm working on a big project and I simplified what it matters here. This is the code:
a = new Thing(/*sayHi + sayHey*/);
function sayHi() {
alert("hi");
}
function sayHey() {
alert("hey");
}
function Thing (callback) {
callback();
}
I'd like to, with just the callback parameter, call both the sayHi() and the sayHey() function, at the order I put them. Is it possible? How would I do it? Thank you.
Pass an anonymous function that calls both of them sequentially:
a = new Thing(function() {
sayHi();
sayHey();
});
function sayHi() {
alert("hi");
}
function sayHey() {
alert("hey");
}
function Thing (callback) {
callback();
}
Alternatively to #Barnar's answer, create and pass a regular named function. If the callback logic gets heavier, you might want that anyway.
function hiHeyCallback() {
sayHi();
sayHey();
}
a = new Thing(hiHeyCallback);

Check for function called

Just wondering if there is anyway to fire some code when a function is called, without adding the code to the function, for example:
function doSomething(){
//Do something
}
//Code to call when doSomething is called
You can wrap the function :
(function(){
var oldFunction = doSomething;
doSomething = function(){
// do something else
oldFunction.apply(this, arguments);
}
})();
I use an IIFE here just to avoid polluting the global namespace, it's accessory.
Well, yes, it's not actually hard to do. The crucial thing is that a function's name is just an identifier like any other. You can redefine it if you want to.
var oldFn = doSomething;
doSomething = function() {
// code to run before the old function
return oldFn.apply(this, arguments);
// code to run after the old function
};
NB that it's better to do oldFn.apply(this, arguments) rather than just oldFn. In many cases it won't matter, but it's possible that the context (i.e. the value of this inside the function) and the arguments are important. Using apply means they are passed on as if oldFn had been called directly.
What about something like:
function doSomething(){
doSomething.called = true;
}
//call?
doSomething();
if(doSomething.called) {
//Code to call when doSomething is called
}
I know you said you don't want to modify the original function, but consider adding a callback. Then you can execute code based on different results in your function (such as onSucess and onError):
function doSomething(onSuccess, onError){
try {
throw "this is an error";
if(onSuccess) {
onSuccess();
}
} catch(err) {
if(onError) {
onError(err);
}
}
}
Then, when you call doSomething, you can specify what you want done with inline functions:
doSomething(function() {
console.log("doSomething() success");
}, function(err) {
console.log("doSomething() error: " + err);
});

Let a function "return" the super function?

Given is the following code:
function two() {
return "success";
}
function one() {
two();
return "fail";
}
If you test the code by calling function one(), you will always get "fail".
The question is, how can I return "success" in function one() by only calling function two()?
Is that even possible?
Regards
You can't make a function return from the function that called it in Javascript (or many other languages, afaik).
You need logic in one() to do it. E.g.:
function one() {
return two() || "fail";
}
function one() {
return two();
}
You could do it, using a try-catch Block, if your function one anticipates a probable non-local-return as well as function two like this using exceptions:
function two() {
throw {isReturn : true, returnValue : "success"}
}
function one () {
try {
two()
} catch(e) {
if(e.isReturn) return e.returnValue;
}
return "fail";
}
, I believe.
function one() {
return two();
}

Categories