I have an ecma6/es2015 class with a getter defined like so:
get foo() { return this._foo; }
What I'd like to be able to do is pass that function as a parameter. Making a call like so:
someFunction(myClass.foo);
will simply invoke the function. Is there a clean way I can pass the method without invoking it and then invoke in the pass I'm passing it into?
I assume you'll have to wrap it into an anonymous function to keep it from getting executed:
someFunction(() => myClass.foo);
Or, you can get the getter function itself, but it is less readable than the above:
someFunction(Object.getOwnPropertyDescriptor(myClass, 'foo').get);
Not sure I understood you do you mean a way to define the function and pass it later to another one (as a function) to be invoked later?
something like this?
var myFunc = function() {
console.log('func');
document.getElementById('result').innerHTML='func';
}
console.log( 'start');
document.getElementById('result').innerHTML='start';
setTimeout( myFunc, 3000 );
console.log( 'end');
document.getElementById('result').innerHTML='end';
<h1 id='result'>default</h1>
Related
Is it possible to pass a javascript function with parameters as a parameter?
Example:
$(edit_link).click( changeViewMode( myvar ) );
Use a "closure":
$(edit_link).click(function(){ return changeViewMode(myvar); });
This creates an anonymous temporary function wrapper that knows about the parameter and passes it to the actual callback implementation.
Use Function.prototype.bind(). Quoting MDN:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
It is supported by all major browsers, including IE9+.
Your code should look like this:
$(edit_link).click(changeViewMode.bind(null, myvar));
Side note: I assume you are in global context, i.e. this variable is window; otherwise use this instead of null.
No, but you can pass one without parameters, and do this:
$(edit_link).click(
function() { changeViewMode(myvar); }
);
So you're passing an anonymous function with no parameters, that function then calls your parameterized function with the variable in the closure
Or if you are using es6 you should be able to use an arrow function
$(edit_link).click(() => changeViewMode(myvar));
Yes, like this:
$(edit_link).click(function() { changeViewMode(myvar) });
You can do this
var message = 'Hello World';
var callback = function(){
alert(this)
}.bind(message);
and then
function activate(callback){
callback && callback();
}
activate(callback);
Or if your callback contains more flexible logic you can pass object.
Demo
This is an example following Ferdinand Beyer's approach:
function function1()
{
function2(function () { function3("parameter value"); });
}
function function2(functionToBindOnClick)
{
$(".myButton").click(functionToBindOnClick);
}
function function3(message) { alert(message); }
In this example the "parameter value" is passed from function1 to function3 through function2 using a function wrap.
The documentation of jQuery's hover shows only one method of using the function:
$('.myClass').hover(function () {
console.log('on mouse over');
},
function () {
console.log('on mouse out');
});
However, when you change these to named functions it doesn't work correctly, firing the named functions upon page load (or as soon as you paste it into your console):
function onMouseOver() {
console.log('on mouse over');
}
function onMouseOut()
console.log('on mouse out');
}
$('.myClass').hover(onMouseOver(), onMouseOut());
Changing the last line to:
$('myClass').hover(onMouseOver, onMouseOut);
works as expected (firing on the event), but doesn't allow me to pass anything to the named functions. Is there any way to allow me to pass a variable to the functions?
Yes you need to use anonymous functions for this:
$('myClass').hover(function( e ) {
onMouseOver( param1, param2... );
}, function( e ) {
onMouseOut( param1, param2... );
});
You can pass variables into the named functions by calling it like so:
$('.myClass').hover(function() {
onMouseOver(arg);
}, function() {
onMouseOut(arg);
});
That's the only way to pass arguments, parameters into the named functions from that event.
The hover sugar method isn't really meant for complex scenarios.
In your case it would probably be better to use .on('mouseenter') and on('mouseleave') so that you can pass additional event data to each method, like
$('.myClass').on('mouseenter', {param1: val1}, onMouseOver).on('mouseleave', {param2: val2}, onMouseOut);
Then within your handlers you can access those params like so:
function onMouseOver(e) {
console.log(e.data.param1);
}
function onMouseOut(e) {
console.log(e.data.param2);
}
That's the sort of jQuery way to do it.
This is a problem with function references vs. function invocation. Adding the "()" invokes the function (which in this case you'd be doing at binding time...effectively binding the result of the function rather than the function itself.
To pass arguments the simplest option would be to wrap the named function in an anonymous function (as #antyrat just posted).
And also no, this is not a quirk of hover, this is standard JavaScript (and most any other language that has first class functions).
As several others have noted, you'll have to use currying or binding to pass values to the functions. In the example where you wrote this:
$('.myClass').hover(onMouseOver(), onMouseOut());
you're actually calling the onMouseOver() and onMouseOut() methods immediately on that line, and not when the mouse actually moves over or out of the element; what you wrote is equivalent to writing this:
var mouseOverResult = onMouseOver();
var mouseOutResult = onMouseOut();
$('.myClass').hover(mouseOverResult, mouseOutResult);
That's definitely not what you want.
jQuery can only understand functions that are of the form function(event), so if you want more parameters, or other parameters, you'll have to use currying to get them in there. Currying (named for the math professor who devised the concept) can be thought of as creating a new function where the values you want to pass are 'pre-bound' inside it.
So let's say you have a variable foo that you'd like to pass into your onMouseOver handler, like this:
function onMouseOver(foo) {
...
}
...
var foo = "Hello, World";
$('myClass').hover(...);
To be able to pass that value, you need another function that wraps up that foo and that onMouseOver with a function signature that jQuery can use. You do it like this:
function onMouseOver(foo) {
...
}
...
var foo = "Hello, World";
var curriedOnMouseOver = function(event) {
onMouseOver(foo);
};
$('myClass').hover(curriedOnMouseOver);
As several others have suggested, you can avoid the extra variable declaration by creating the curried closure inside the hover() call:
function onMouseOver(foo) {
...
}
...
var foo = "Hello, World";
$('myClass').hover(function(event) {
onMouseOver(foo);
});
This example above also shows how you would pass the event to your function as well, by simply adding more parameters to it:
function onMouseOver(event, foo, bar) {
...
}
...
var foo = "Hello, World";
var bar = "Goodbye, World";
$('myClass').hover(function(event) {
onMouseOver(event, foo, bar);
});
JavaScript's functions --- or closures --- are incredibly powerful tools, and it would be worth your while to learn some of the things you can do with them, like these examples.
I need to write a function:
function doTestConnCall(param1, param2, callbackfun)
param1 & param2 are parameters which I have used inside the function.
The 3rd parameter - callbackfun is a function which to be called after finishing doTestConnCall
How to achieve this?
Is it possible to pass 2 callbacks inside a single method. Say doTestConnCall(param1,callback1,callback2)
Think I am missing some basics. Could any one lead me
You can do something like this:
callbackfun(argument1, argument2);
or:
callbackfun.apply(this, [ argument1, argument2 ]);
or:
callbackfun.call(this, argument1, argument2);
The same can be done with multiple callbacks. For example:
callback1.call(this);
callback2.call(this);
See: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply
And: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call
Functions in JS are top level constructs. That means function hello() {} is the same as var hello = function() {};. So if you want to pass hello to the function above, you can just call doTestConnCall(param1, param2, hello) after you have defined hello() using either method above.
This is how you achieve it.
It is possible to pass what ever you want to as a method parameter.
function doTestConnCall(param1, param2, callbackfun){
DO YOUR LOGIC
callbackfun() // CALL YOUR CALLBACK
}
Call any callback whenever appropriate in the function you are writing--in the case you described, after it completes its core work.
Yes, of course. Call them one after another.
function multipleCallbacks(arg, arg, callback1, callback2) {
// Do some stuff
// Do error checking in the real world if you need to be tolerant
callback1();
callback2();
}
I want to write my own function in JavaScript which takes a callback method as a parameter and executes it after the completion, I don't know how to invoke a method in my method which is passed as an argument. Like Reflection.
example code
function myfunction(param1, callbackfunction)
{
//do processing here
//how to invoke callbackfunction at this point?
}
//this is the function call to myfunction
myfunction("hello", function(){
//call back method implementation here
});
You can just call it as a normal function:
function myfunction(param1, callbackfunction)
{
//do processing here
callbackfunction();
}
The only extra thing is to mention context. If you want to be able to use the this keyword within your callback, you'll have to assign it. This is frequently desirable behaviour. For instance:
function myfunction(param1, callbackfunction)
{
//do processing here
callbackfunction.call(param1);
}
In the callback, you can now access param1 as this. See Function.call.
I too came into same scenario where I have to call the function sent as parameter to another function.
I Tried
mainfunction('callThisFunction');
First Approach
function mainFuntion(functionName)
{
functionName();
}
But ends up in errors. So I tried
Second Approach
functionName.call().
Still no use. So I tried
Third Approach
this[functionName]();
which worked like a champ. So This is to just add one more way of calling. May be there may be problem with my First and Second approaches, but instead googling more and spending time I went for Third Approach.
function myfunction(param1, callbackfunction)
{
//do processing here
callbackfunction(); // or if you want scoped call, callbackfunction.call(scope)
}
object[functionName]();
object: refers to the name of the object.
functionName: is a variable whose value we will use to call a function.
by putting the variable used to refer to the function name inside the [] and the () outside the bracket we can dynamically call the object's function using the variable. Dot notation does not work because it thinks that 'functionName' is the actual name of the function and not the value that 'functionName' holds. This drove me crazy for a little bit, until I came across this site. I am glad stackoverflow.com exists <3
All the examples here seem to show how to declare it, but not how to use it. I think that's also why #Kiran had so many issues.
The trick is to declare the function which uses a callback:
function doThisFirst(someParameter, myCallbackFunction) {
// Do stuff first
alert('Doing stuff...');
// Now call the function passed in
myCallbackFunction(someParameter);
}
The someParameter bit can be omitted if not required.
You can then use the callback as follows:
doThisFirst(1, myOtherFunction1);
doThisFirst(2, myOtherFunction2);
function myOtherFunction1(inputParam) {
alert('myOtherFunction1: ' + inputParam);
}
function myOtherFunction2(inputParam) {
alert('myOtherFunction2: ' + inputParam);
}
Note how the callback function is passed in and declared without quotes or brackets.
If you use doThisFirst(1, 'myOtherFunction1'); it will fail.
If you use doThisFirst(1, myOtherFunction3()); (I know there's no parameter input in this case) then it will call myOtherFunction3 first so you get unintended side effects.
Another way is to declare your function as anonymous function and save it in a variable:
var aFunction = function () {
};
After that you can pass aFunction as argument myfunction and call it normally.
function myfunction(callbackfunction) {
callbackfunction();
}
myfunction(aFunction);
However, as other answers have pointed out, is not necessary, since you can directly use the function name. I will keep the answer as is, because of the discussion that follows in the comments.
I will do something like this
var callbackfunction = function(param1, param2){
console.log(param1 + ' ' + param2)
}
myfunction = function(_function, _params){
_function(_params['firstParam'], _params['secondParam']);
}
Into the main code block, It is possible pass parameters
myfunction(callbackfunction, {firstParam: 'hello', secondParam: 'good bye'});
callbackfunction = () => {}
callbackfunction2(){
}
function myfunction1(callbackfunction) {
callbackfunction();
}
//Exe
myfunction1(callbackfunction);
myfunction1(callbackfunction2.bind(this));
Super basic implementation for my use case based on some excellent answers and resources above:
/** Returns the name of type member in a type-safe manner. **(UNTESTED)** e.g.:
*
* ```typescript
* nameof<Apple>(apple => apple.colour); // Returns 'colour'
* nameof<Apple>(x => x.colour); // Returns 'colour'
* ```
*/
export function nameof<T>(func?: (obj: T) => any): string {
const lambda = ' => ';
const funcStr = func.toString();
const indexOfLambda = funcStr.indexOf(lambda);
const member = funcStr.replace(funcStr.substring(0, indexOfLambda) + '.', '').replace(funcStr.substring(0, indexOfLambda) + lambda, '');
return member;
}
How do I make the myFunction visibile for the in-line function in .ready() event?
$(document).ready(function() {
...stuffs...
myFunction(par1, par2, anotherFucntion_callback);
}
);
function anotherFunction_callback(data) {
..stuffs..
}
I didn't quite catch your question. Do you mean that you want to pass "myFunction_callback(data)" as the last argument in your:
myFunction(par1, par2, anotherFunction_callback);
, including that "data" parameter?
In that case the solution is pretty standard, write this before that one:
var temp = function() { anotherFunction_callback(data) };
an alternative syntax is:
function temp() { myFunction_callback(data) };
// even though this looks just like a free function,
// you still define it inside the ready(function())
// that's why I call it "alternative". They are equivalent.
In general, if you want to pass a function with 1 or more arguments to another function, you use that format. Here, we basically create a new no-argument function that calls another. The new function has access to the "data" variable. It's called "closure", you may want to read more on that.
Of course, if the callback require no argument, you can just use the original function name.
I hope this helps.
ps: You can even inline the function declaration, making it anonymous, like so:
myFunction(par1, par2, function() { myFunction_callback(data) });
Notice that the
$(document).ready(function() {});
looks pretty much just like that.
You use the actual name of the function, i.e. myFunction_callback instead of myFunction or anotherFucntion_callback.