What Happens When An Event Is Triggered And Page Update Both Take Place At The Same Time?
Solution 1:
The console.log is synchronous call and page is redirected after the completion of the click event. If you have asynchronous call in the click event then you have to take care that your have to wait for response before leaving the page.
Solution 2:
There's a little (lot) more to this than meets the eye.
First, you should really understand event-bubbling.
That is to say, you've set the "click" event-handler to run as soon as the <a> element has found a "click" event.
Which means that whatever handlers are given to that object will run before the element tells its parent (who will tell their parent, on and on, until you get to the top of the page).
Switching pages happens at the root-element (<html> or document.documentElement).
So on the same event, the a.onclick = function () { }; will always happen before the window.onclick = function () { }; handler, because of bubbling.
HOWEVER that only begins to scratch the surface...
If you are running async operations inside of your click-handler, and it's a click on a link, and the browser is going to change pages, then all of your async stuff (server-calls/image-loads/script-loads/etc) are ignored (or cancelled), once the browser reaches the "unload" phase (more on that, later).
You would either need to synchronize what you're doing (save to document.cookie or localStorage, instead of making AJAX calls, et cetera), or manually prevent the <a> from telling its parents what happened, using .stopPropagation() on the event object, which is passed to the event-handler.
Of course, now that it doesn't tell its parents, it will never reach window, so the page will never change...
...so now, in your handler, if you want the page to change, after you've done your async stuff, you have to manually make the page-change happen by setting window.location = googleEl.href;, and do so after you're sure all of your async work is done.
...of course, that's not the end of it... ...when the browser does want to change the page, it also fires a "beforeunload" event, and an "unload" event you can listen to from window. Again, the same async rules apply...
And to make things muddier, only most browsers fire "beforeunload", some don't bother.
So to answer your exact question:
The click-handler fires first, then a few events in between, then "beforeunload", then "unload", then the page changes.
Solution 3:
I would recommend redirecting through anchor after on click. therefore :
$('#google').on('click', function (e) {
console.log("Click Click Bang Bang!");
//This would stop from redirecting
e.preventDefault();
//This will take you to Google after completing the above taskwindow.location.reload = "http://google.com";
});
Post a Comment for "What Happens When An Event Is Triggered And Page Update Both Take Place At The Same Time?"