I am trying to use prerender.io and my problem is setTimeout function is executed without any delay or timeout.
Normal
setTimeout(function(){
//stuff
},300)
does not work either.
Related
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
})
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.
Here's the odd situation:
we have a piece of javascript library that is being called on our onload of aspx page.
It works everytime for us, but the clients that have low speed modems get an error, because the object is not getting initialized and the aspx page is already loaded.!!
Is there any suggestions on how to call this piece of js code?
Thanks,
make sure you have your end tags.. i have seen onLoads in the not working right when your core tags are incomplete or not properly formatted
The onload even happens when everything in the page is loaded. If you have some script that is loading from a different server (ads, statistics), the onload event won't fire until those are loaded also. If their server is having problems, your onload may never fire at all, or after several minutes when the browser gives up waiting.
Instead of using onload you could put your code in a script tag as early as possible in the page, i.e. after the last element that the script needs.
If you have some external script that doesn't need a specific place in the page (statistics for example), you can move it to the bottom of the page to minimise the risk of interference with the rest of the page.
With JQuery you can call your functions with ready event :
$(document).ready(function() {
// call your functions here
});
The event will be called when the DOM is loaded.
I am using jQuery 1.3.1 and saying $('#somediv').load('somepage.aspx') An aspx that have a Repeater which loads few images. When loading is complete a cycle() function (jQuery plug-in) will be called upon them.
Now I have this working on http://www.techlipse.net/test/agb via the function called from the menu-event-handlers (a combo box). When it is loaded via the event handler of the combobox I call cycle() plugin as a callback function to the load() method, or function .. I think I might have misunderstood some of the fundemantals of javascript, or why the document.ready() is firing long before the images are fully loaded therefore failing the cycle() plug in. When it is said to be a bug of jQuery1.3.1 that it does wait for them to load. Posted here:
JQuery is waiting for images to load before executing document.ready
any help .?
document.ready fires once the document is ready. Not the images. You'll have to run a second check on images to check they have totally loaded.
The whole point of $(document).ready is that it fires as soon as the DOM is manipulable, but before window.onload - which fires after all HTTP traffic is done with.
You should upgrade from 1.3.1 ASAP. Its $(document).ready() functionality was buggy, making generally correct answers about $(document).ready() not necessarily accurate in your situation.
As the title suggests, I am having trouble maintaining my code on postback. I have a bunch of jQuery code in the Head section and this works fine until a postback occurs after which it ceases to function!
How can I fix this? Does the head not get read on postback, and is there a way in which I can force this to happen?
JavaScript is:
<script type="text/javascript">
$(document).ready(function()
{
$('.tablesorter tbody tr').tablesorter();
$('.tablesearch tbody tr').quicksearch({
position: 'before',
attached: 'table.tablesearch',
stripeRowClass: ['odd', 'even'],
labelText: 'Search:',
delay: 100
});
});
</script>
If you just have that code hard coded into your page's head then a post back won't affect it. I would check the following by debugging (FireBug in FireFox is a good debugger):
Verify the script is still in the head on postback.
verify that the css classes are in fact attached to some element in the page.
verify that the jquery code is executing after the browser is done loading on post back.
EDIT: Are you using UpdatePanels for your post back? In other words is this an asynchronous postback or a normal full page refresh?
EDIT EDIT: AHhhhh... Ok. So if you're using UpdatePanels then the document's ready state is already in the ready so that portion of jquery code won't be fired again. I would extract the jquery delegate out to a separate function that you can also call after the async postback.
put your code in
function pageLoad(sender, args) {
/* code here */
}
instead of in $(document).ready(function() { ... });
pageLoad() is a function that will execute after all postbacks, synchronous and asynchronous. See this answer for more details
How to have a javascript callback executed after an update panel postback
I'm guessing that the postback pre-empts the page's onLoad event, which jQuery needs to hook into to use it's .ready().
Does the script exist in the HTML code after the postback?
If so, does the code get executed? Test by commenting out your code and temporarily add alert('test');
If so, are the elements referenced by the code available on the page after postback?
Instead of using $(document).ready you should put your code in a function called pageLoad(). The pageLoad() function is by convention wired up to be called whenever the page has a postback/asyncpostback.