I'm writing a realtime updating graph using Angular2. My graph is being updated through data coming via an http observable, and a setInterval command.
A weird thing I've noticed is that, when I route through angular to a different view on my app, the setInterval command on the previous component does not stop, causing the server for unnecessary load.
What would be the correct method to stop setInterval http requests on route changes in Angular2?
Any help would appreciated.
Events are managed very differently by browsers, basically they are processed by Event loop.
The browser has inner loop, called Event Loop, which checks the queue
and processes events, executes functions etc.
So whenever you add any asynchronous event like setTimeout/setInterval, they gets added to Event Loop with their handlers.
Basically whenever you wanted to stop/de-register those asynchronous event, you need to de-register them manually. Like here you need to call clearInterval method with that setInterval object reference, then only it will remove that async event from Event Loop.
You could use ngOnDestroy life-cycle hook where you can have your stuff before destroying your component.
//hook gets called before Component get destroyed or you can say disposed.
ngOnDestroy(){
clearInterval(intervalReference)
}
Extra stuff(Comparing with Angular 1)
The same kind of problem you can see in any Javascript Framework. In Angular 1 there is way to handle such kind of situation(I'm adding this stuff so that anyone from Angular 1 background can easily get this concept by comparing A1 with A2). While destroying controller instance angular internally emit's $destroy event over element & $scope of that element. So by having listener over $destroy event, we used to do stuff to ensure those object value/object/events should not available.
$scope.$on('$destroy', function(event){
//do stuff here
})
element.bind('$destroy', function(event){
//do stuff here
})
Related
I am new to Adobe Analytics and DTM.
On my website, an asynchronous API is creating a div on the page dynamically. This DIV has a special CSS class, let's say "wantedClass".
I want to create 2 rules :
A rule that fires once the DIV appears on the page, which i did like using Page Load Rules as following :
On this trigger, an event1 is fired in Adobe Analytics.
I picked onLoad because I read that this is the last one among the other options, and I want to make sure that the API async finished creating the DIV so this event would be fired.
A rule that fires once the DIV is clicked, which I did using Event Based Rules as following :
On this trigger, an event2 is fired.
What's happening when I test is :
Page loads, no event1 is fired
DIV clicked, no event2 is fired, BUT event1 is fired.
What am I doing wrong?
Any help would be appreciated;
1. Page loads, no event1 is fired
Async calls by their nature can happen after DOM Ready or window load (onLoad), so onLoad is not guaranteed to trigger after some API (async) ajax call is made and returns something.
Ideally, you should trigger something in the API's ajax success callback function. You can create and trigger a Custom Event which DTM can listen for in an Event Based Rule. Note: If you go this route, make sure you create/trigger on document.body or a decendant; DTM will not listen for custom events on document itself. Also, since I see you using jQuery syntax in your screenshot, if you go this route, also note that jQuery custom event functionality is NOT the same as native javascript custom events. So for example if you do $( document.body ).trigger( "someEvent" ), this does NOT push to something listening to
document.body.addEventListener('someEvent', function (e) { /* ... */ }, false);
DTM uses the above to listen for custom events. So TL;DR - don't use jQuery syntax to create or broadcast custom events if you intend on using DTM's built-in custom event listener.
Alternatively, within the API's ajax callback function, you can just do _satellite.track('dc_rule_value_here'); and create a Direct Call rule with 'dc_rule_value_here' as the string condition.
If you cannot add something to the API ajax callback function, the next best thing is to create a Data Element of Custom Code type, with the code you have in your screenshot condition (returning true or false if .wantedClass is found). Then, create an Event Based Rule of Data Element Changed type, with a condition reflecting what you return from the data element. This isn't ideal because this rule type works by polling the data element every 1 second for the duration of the page view. This isn't that big a deal in the grand scheme of things but it is not as efficient as other methods (and if you 0make it a practice to do this for a lot of rules, then it might become a problem). Note that you should also bake into your Data Element to only return true once, so that it doesn't keep triggering the EBR every 1s after its found (DTM does not have a native "fire only once" type config).
2. DIV clicked, no event2 is fired, BUT event1 is fired.
Not sure about this one. At face value, it sounds like the DTM rule itself is working, but there is a problem with the AA s.events being set. Could be that you simply typo'd and put event1 into the rule, though I'm sure you checked that.. right?
Could be you have other code (e.g. code within s.doPlugins callback) that is overwriting it. Or maybe it's some other rule entirely that is triggering, not the one above.
May be able to help further if you provide more details on how/where you actually set the event (including other places you may be setting both events), but it but kinda sounds like something I'd have to see this in action on a page to really get to the bottom of it :/
I am implementing a FullCalendar Scheduler where the client can drag the events around the timeline.
When an event is dragged and dropped somewhere, an ajax call is made, where the backend perform some operations on the database, and possibly reverts the event if something went wrong.
What I want to achieve, is to block the event dragging possibility, while the backend script runs, so the users can not drag and drop anything until the backend code finishes. This could be easily achievable, by having a callback function for the event objects editable property where I check a global variable to determine if any event is in the upgrading process currently, or not, but unfortunatly, it seems that FullCalendar does not support this.
Do you know of any other solution to achieve my desired behaviour?
At the moment I am using FullCalendar V3, so I would prefer a solution to that version, but if an easy to implement solution shows itself with V4, I am willing to upgrade.
I want to execute a function when any page loads.
Things like Meteor.startup() and Template.myTemplate.onRendered() are not what I want because they are triggered only once, when the app is loaded.
Basically I need an event that is triggered every time the URL changes, is there one?
You can use onRun or onBeforeAction to run arbitrary code on every route change.
Router.onRun(function(){
console.log('onRun', this.current().route.getName());
this.next();
});
Router.onBeforeAction(function(){
console.log('onBeforeAction', this.current().route.getName());
this.next();
});
Use this placeholder code to detect when this code will actually run.
onRun will run only once on every route change. (good for analytics related stuff)
onBeforeAction will reactively rerun when the current route data context is modified.
I'm using capybara-webkit and would like to get the event handler(s) bound to the click event of an element in the DOM. An answer even using native QtWebKit calls would probably be enough for me to figure out how to do it using the webkit driver in Ruby. The challenge I am having is that the event handlers are being bound programmatically in JavaScript, not in HTML, and my searches so far on how to do this all seem to end with how to click or otherwise trigger events in a QWebView. I need to inspect the event handler (i.e. the actual function definition), in particular anonymous functions bound to the event, without generating the event itself. Any help is appreciated.
You can execute arbitrary Javascript and return the result using page.execute_script. If the event handlers in question are bound using jQuery, this will list them:
page.execute_script(<<-JAVASCRIPT)
var handlers = $('.some-selector').data("events").click;
jQuery.each(handlers, function(key, handler) {
console.log(handler);
});
JAVASCRIPT
There's a complete answer on introspecting on event handlers here: How to find event listeners on a DOM node when debugging or from the JavaScript code?
Do the same best practis rules regarding subscribing/unsubscribing to events apply in asp.net?
I know it might seem like a silly question, but when I think about it, I have never really seen any code where people first subscribe to an event on a page and then unsubscribe later on in the web request.
Example 1:
On a page, in the Page_Load method, I subscribe to a updating event on a ListView. Should I unsubscribe from that event later on, for example in the OnPreRenderComplete method?
Example 2:
In the passive view patter, a view (Page control/Usercontrol) will raise an event whenever it needs the presenter to do anything. So the presenter needs to subscribe to events on the view, but do it also need to unsubscribe from the events again?
Best regards, Egil.
The page instance and all of its components will "go out of scope" when request completes, e.g. they become eligible for GC. So your ListView will go out of scope along with the Page/user controls on it. You don't need to unsubscribe (unless you subscribe to an event that belongs to some kind of singleton that survives every request and use one of the methods of the page as the event handler, for example).
The same thing is valid for the presenter (again as long as this presenter is used solely with one page and goes out of scope after that).
Generally, no. Events are supposed to be dumped automatically when the page unloads. SUPPOSED to be. I've run into a bug before (in .NET 1.1) where that wasn't the case.
I won't bother unsubscribing, unless I notice a problem with the page (like, a method being called 20 times from a phantom in the call stack: that's usually a sign of something not being unsubscribed properly).