I'm trying to call a Page Method using a jQuery 'attached' event function, in which I like to use the closure to keep the event target local, as below, but page method calls declare several 'error' functions, and I would like to use one function for all of them. If, in the below code, I was handling an error and not success, how could I use my single, anonymous handler for all 3 error functions?
$(":button").click(function () {
var button = this;
PageMethods.DoIt(
function (a, b, c) {
alert(button);
});
});
This example passes an anonymous function for the success callback. There is only one of these. If I was passing an error callback, how could I use 'function (e, c, t)' for all 3 error callbacks?
ADDED: What I would like to do here is trigger an AJAX call whenever the user clicks a toggle button (checkbox), but to improve responsiveness, I want to toggle the button state immediately, and only 'untoggle' it if the AJAX call fails.
Now, in my client-side click() event handler, I would like to use anonymous functions inside the scope of click()' so that the functions have access to thethisevent argument, but I don't want to 'declare' three functions for theonTimeout,onError, and 'onAbort arguments of the PageMethods.MyFunction function. if I declare a named function outside of the click handler, it no longer has access to the 'this' parameter of the click() event handler.
If your goal is to keep this function out of global scope, use the module pattern:
(function() {
function asplode() {
alert('Your head asplode.');
}
$('body').click(asplode);
})();
I think you can put a variable with name in front of it, like this:
var myFunction = function(a, b, c) { ...
It's been a while I haven't done this but you could give it a try.
You have to assign an anonymous function to a variable using var (always use var, otherwise a variable gets global scope, which may cause unexpected results (e.g., never declare variable i globally)). That's the only way to reference it:
var myFunction = function (a, b, c) {
/* tum de dum */
}; // don't forget this semicolon
Then you can use this function in different places:
$(":button").click(myFunction);
/* don't put braces after the function name when referencing it,
else it will be called immediately */
You can find more information about function expressions and function declarations in the article Named function expressions demystified.
You can't. The whole point of an anonymous function is that it has no name and thus cannot be referenced. (In fact, "anonymous" is basically the Greek word for "unnamed".)
If you want to reference it, you need to give it a name.
From inside the anonymous function, you can reference it as arguments.callee (this is how anonymous recursion is achieved).
If I understand correctly what you want to do, you may be able to accomplish it like this:
function handler(a, b, c) {
alert(this); // button
}
$(":button").click(function () {
var button = this;
PageMethods.DoIt(function () {
handler.call(button, a, b, c);
});
});
Related
I had an incident in my Angular 6 application the other day involving some code that looked like this:
console.log('before:', value);
this.changeValue(value);
console.log('after:', value);
changeValue() modifies value in some way. I expected to see the unmodified value in the console before the call to changeValue() then the modified value after. Instead I saw the modified value before and after.
I guess it proved that my changeValue() function worked, but it also indicated to me that console.log() is asynchronous--that is, it doesn't print out the value to the console right away; it waits for a bit... and when it finally does print the value, it's the value as it is at that moment. In other words, the first call to console.log() above waited until after the call to changeValue() before printing, and when it did, the value had already changed.
So am I correct in inferring that console.log() is asynchronous. If so, why is that? It causes a lot of confusion when debugging.
No, console.log() is synchronous. It's actually your changeValue() function that doesn't work the way you think.
First, JavaScript doesn't pass variables by reference, but by pointer to object (as do many other languages). So although the variable value inside your function and the variable value in the outer scope both hold the same object, they are still separate variables. Mutatin the object affects both variables, but direct assignments to one variable do not affect the other. For example, this obviously wouldn't work:
function changeValue(x) { x = 123; }
Second, in JavaScript the shorthand assignment a += b does not mutate the existing object stored in a. Instead it works exactly like a = a + b and assigns a new object to the variable. As mentioned above, this only affects the variable inside the function, but doesn't affect the one outside, so your changes are lost after the function returns.
More examples:
function willwork(obj) { obj.foo = "bar"; }
function willwork(obj) { obj["foo"] = 1234; }
function willwork(obj) { obj.push("foo"); }
function wontwork(obj) { obj = "foo"; }
function wontwork(obj) { obj += 123; }
function wontwork(obj) { obj = obj + 123; }
I'm new to Groovy and I'm studying closures in the oficial docs. The 'delegate of a closure' topic gives the example bellow:
So, in the number 5, I know that delegate is set default to owner, that in the case is the enclosing closure enclosed.
So, why calling
{ -> delegate }.call()
inside the enclosed closure doesn't end up in a recursive call? Looks like a recursion to me, but if you run the code, isn't a recursion. What I'm missing here?
def enclosed = {
// delegate == owner == enclosed (variable)
{ ->
// When this closure is called return the delegate (enclosed)
delegate
}.call() // Called immediately
// above closure is same as writing
// return delegate
}
// When enclosed in called the delegate is returned immediately
// from the invocation of the inner closure, hence the result of the
// closure call is the closure (delegate) itself
assert enclosed() == enclosed
Keep in mind that whatever is suppose to happen inside enclosed closure will not happen until enclosed() is called. :) Does it depict a clear picture now?
Calling { -> delegate }.call() in the enclosed closure doesn't cause a recursive call because call() is invoked on a different closure; the one created in enclosed. To get a recursive call you can do this: { -> delegate }.call().call(). The first call() returns enclosed, and the second invokes it.
Is it possible to somehow override a method in Meteor?
Or define another function such that both will get called?
In my regular code:
Meteor.methods(
foo: (parameters) ->
bar(parameters)
)
Somewhere else that gets loaded later (e.g. in tests):
Meteor.methods(
# override
foo: (parameters) ->
differentBehavior(parameters)
# I could call some super() here
)
So I would expect to either have both bar and differentBehavior executed or only differentBehavior and some possibility to call super().
Does this exist?
To override a method, on server side you can do:
Meteor.methods({
'method_name': function () {
//old method definition
}
});
Meteor.default_server.method_handlers['method_name'] = function (args) {
//put your new code here
};
The Meteor.default_server.method_handlers['method_name'] has to be included after the method definition.
To override a method (also know as a stub), on client side you can do:
Meteor.connection._methodHandlers['method_name'] = function (args) {
//put your new code here
};
The Meteor.connection._methodHandlers['method_name'] has to be included after the method definition.
There are lots of ways you can do what you are intending to do.
For instance, the simplest way to overwrite any function would be to do something like:
Meteor.publish = function() { /* My custom function code */ };
We just over-wrote the Meteor.publish with our own instance.
However, if you want to wrapper a function like a proxy (I believe this is called a "proxy pattern":
var oldPublish = Meteor.publish();
Meteor.publish = function() {
oldPublish(arguments); // Call old JS with arguments passed in
}
ES6 also added a Proxy object that allows you to do some similar things (read about it here).
Also there are lots of AOP libraries (CujoJS, jQuery-AOP, and node-aop to name a few) for JavaScript that allow you to do before, after, around pointcuts on functions/objects. You could even roll-your-own if you wanted too.
I have some questions with a particular structure of a program I'm writing.
I'm using a Remote Object to make a remote call to a Rails method (using WebOrb). The problem arises in the way that I get my data back.
Basically I have a function, getConditions, in which I add an event listener to my remote call and then I make the remote call. However, what I want to do is to get that data back in getConditions so I can return it. This is a problem because I only access the event result data in the event handler. Here's some basic code describing this issue:
public function getConditions():Array
{
remoteObject.getConditions.addEventListener("result", onConditionResult);
remoteObject.getConditions();
//Here is where I want to get my event.result data back
}
public function onConditionResult(event:ResultEvent):void
{
//Here's the data that I want
event.result;
}
How can I achieve this data turn-about?
Remote calls in flex are always asynchronous so you won't be able to call getConditions() and wait there for the result. You have to use a function closure to process the results, either by means of an event handler than you declare elsewhere or a dynamic one created immediately within getConditions(), like so:
remoteObject.getConditions.addEventListener("result", function(event:ResultEvent):void {
// Run the code that you would want to when process the result.
});
remoteObject.getConditions();
The advantage of doing the above is that you would be able to "see" parameters passed to getConditions() or the result of any logic that happened before addEventListener() in the function closure. This however, takes a slight performance hit compared to declaring an explicit function (for that exact reason).
I should also add that doing so requires you to clean up after yourselves to make sure that you are not creating a new listener for every request.
you do it like this
public function getConditions():Array
{
remoteObject.getConditions.addEventListener("result", onConditionResult);
remoteObject.getConditions();
}
public function callMyExtraFunction(data:Object):void
{
//Here is where you want to get your event.result data back
}
public function onConditionResult(event:ResultEvent):void
{
//Here's the data that you want
var data:Object = event.result;
callMyExtraFunction(data);
}
You could make use of Call Responder like so :
<s:CallResponder id="getOperationsResult"/>
then use these lines to get the result from get operations
getOperationResult.token = remoteObject.getOperation();
this creates the call and returns the result stores it in getOpresult
whnever u want to access this u can call that token or getOperationResult.lastResult
Hope that helps
Chris
I am trying to use the $addHandler function to add a handler to a text box's click event
var o=$get('myTextBox');
var f = Type.parse('funcWithArgs');
$addHandler(o, 'click', f);
However I need to pass parameters to the called function. How do you do that?
TIA
Wrap your function with an anonymous function (aka lambda):
$addHandler(o, 'click', function() { f(my, arguments, go, here); });
Alternative solution:
If you had a function that created partials, you could do that as well - I use a toolkit that provides for that, and this is how it would be done:
$addHandler(o, 'click', partial(f, my, arguments, go, here));
I don't know (and actually doubt) that Microsoft's framework provides for that, but you could look into writing your own partial function.