Event execution order in JQuery - javascript

It's really not a duplicate, please read it before tagging.
I have a button with multiple events being attached (save, validate, etc.). In one controller, I'm attaching a function, which I need to execute as the last event. I can't move with other code much, its a big company project (=can't affect the order in which controllers are being called and the events attached). I can see that my function is not the last one getting attached.
I found a way to make sure that the function is executed first - which is more convenient because the events attached after the function go to the end and don't affect it anymore.
But is there a way to make sure the function is always being called last, no matter what?

Related

Function being called multiple times after the first time (Kendo Grid)

I don't even know where to begin. I'm using Kendo Grid to list data sourced from a server. Everything is fine on first load including when I add additional functions and dom elements in the dataBound function. Calls to the server seemingly update (sync) the Grid just fine. BUT, it seems the dataBound function is called an additional time the second time round. Performing an on click function coded in the dataBound performs it a total of 4 times. How do I test for where the issue is and what do I need to destroy to stop this infuriating behaviour?
I don't even know what code to give you save for pasting in my whole website. What is the underlying theory behind this behaviour because there's obviously something I am fundamentally missing about how javascript, and therefore Kondo, works? How do I test for this, please. Thanks!
A quick solution might be to use off() then on() in the databound e.g.
$(".cell").off("click").on("click", function(e){ ... });
this will get rid of previously attached handlers and ensure you only have one.
Even better, use event delegation outside of the Grid generating code.
$(document).on("click", ".cell", function(e) { ... });
With event delegation, the target of the event does not have to exist at the time the event handler is setup. In the example above, the click is on the document object which already exists, but the handler will only fire if an element with the class 'cell' is actually clicked. You can define this handler once in the document.ready before the grid is even created.

Javascript execution in browser

This might sound silly, but has got me bugged for the past couple of days. I just wanted some clarity on how javascript is interpreted and executed in a browser, esp during event handling. Suppose i have two functions based on a click event for the same element. Might be two different event listeners written for two different classes, and the same element has both these classes during the click. Which function does the js executer run first?
Does the interpreter interpret the complete js file on event being triggered or use a bytecode generated during interpretation as in Java or specifically execute lines x - x+y?
Rather than knowing if function 1 would execute before function 2 or vice versa, i am more curious about the mechanism behind the whole process of registering and handling events using js.
i am more curious about the mechanism behind the whole process of
registering and handling events using js.
Think of it as a queue where events are getting pushed when you do element.addEventListener.
Queue has a property -> First-In-First-Out.
So, which ever event-listener has been added to the queue first (basically received by the event-target first) will be executed first, until all of them are executed.
Note: If the same event-handler method is added more than once (same parameters to addEventListener), then older one is replaced by new one.
Secondly, When we add the event via addEventListener we specify a boolean value called - useCapture. If the value is true, then events assigned to parent element is fired first and child-elements later, and vice-versa if this value is false.

Debugging JS/CoffeeScript code: Events, Callbacks etc

Recently I am finding difficulty understanding whats happening in a CoffeeScript/Backbone app. Its hard to trace whats happening quickly without a very slow step through. The problem I think is: I know an event is triggered (Backbone view event). But I dont know which functions are called because of it. There maybe more than 1. I may not even know with view partial is the event defined (so I cant put a breakpoint?)
Is there a debugger which plots the execution of the program as a graph? So that I can zoom into what I need, or maybe something I can use to "visualize" the execution of my code. Maybe not, if what should I be looking out for. I am not sure where I need to put a breakpoint since I dont know where some events are triggered. Then sometimes I find it hard to understand why the code step through might be jumping here and there, maybe its multiple events and their handlers executing?
Everything in Backbone (Views, Models, Collections, Routers) extends Backbone.Events. That means they have an _events property that contains each bound event (e.g. change) with an array of their subscribers.
In order to access this open your javascript console in chrome, firefox or safari (or anything but IE) and enter the name of a globally accessible instantiated object with ._events at the end. E.g.
products._events
After pressing enter you should be able to expand this and see what is published and subscribed.

Efficiency of .off() / .on() jQuery event handler binding combo

I have an object, and when that object is instantiated, it attaches a click event handler to the <body>. (The process of attaching happens within that object's definition)
This object is instantiated when the URL is changed (when the user navigates to another page).
There is always one type of this object 'per page', and as previously noted, it reinstantiates when the pange is changed, and the old object will no longer exist.
The attaching process looks like this:
var doc = $(document.body);
doc.off('click');
doc.on('click', function(){
do_stuff();
});
I am using this because I noticed that if simply attach the event handler, omitting the .off(), the handler will fire more times on a simple click as I navigate through the site (because it was attached/registered with every instantiation of that object).
Now, I could move this attachment process somewhere else, for example in the code section where the instantiation occurs, so it won't depend on that object and assure that the handler will be attached only once, but that would deprive me of access to some local variables and I would have to make them accessible to that code section.
My question is: Does this cost a lot performance-wise? I have noticed some posts here, on stackoverflow, emphasizing this is not optimal, but most of the examples displayed code with .off() or unbinding happening inside the .on()/binding.
IMPORTANT NOTE: I am using backbone.js. It is a 'one-page site'. The objects are basically views and their instantiation occurs in the router.
In short, no, there's no meaningful performance penalty to using off. Now I won't swear on a stack of bibles that it's impossible for off to cause a performance issue, but I will say that in 99 out of 100 (maybe more like 999 in 1,000 or 9999 in 10,000) real world cases you will never have to worry about off 'causing a performance problem.
To put it another way, off won't ever cause a noticeable performance slow-down unless you do something really crazy with it, or have a really crazy site that inadvertently does something really crazy with it.
NOT calling off on the other hand can cause lots of issues, performance-related and otherwise.

After page loads I can't execute Javascript functions that access properties from console

I have a page that loads a bunch of scripts to prepopulate dropdowns and has scripts within the html onclick events and etc.
After the page loads and I open the page in the script console I can't do anything. everything is null and functions non-existent.
For example there is an onClick function onclick="Popup('Seattle');".
If I try to invoke that from the script console I get Object Expected error like it doesn't even exist. But if I click the button the method fires right up. I can't modify this code so it's important that I get this functions going.
While I'm stepping through the code and have the script paused I have access to everything but as soon as it's finished it's back to nothing at all.
Anyone know what's going on and is there a way to invoke these functions?
"Object expected" sounds like for example the Popup function wants to be called like Popup.call(somedomnode, args...). When called from an event handler, this is set to the element the handler is called on. If you just try to call it without some object as this, it might complain.
Otherwise probably the functions you want to call are not in scope at top-level. You don't really tell us how these functions are defined or how the event handlers get set up, so it's hard to say more where the problem might be.

Categories

Resources