window.onload not working after page load chrome dev console - javascript

window.onload doesn't seem to run the specified function in the chrome console and I can't seem to find anyone with the solution.
Code:
function preStart() {
console.log("Hello");
}
window.location = 'https://www.google.com/';
window.onload = preStart;
When ran the window.location successfully runs but "preStart" does not.
I realize that window.onload doesn't work after window.location but is there a solution to this? (Where the function runs after the page loads)
Since I am relatively new to JavaScript please explain any answers/solutions.
Any help with this would me much appreciated.

You basicly are passing the preStart function to the window.onload method.
I see a bit misunderstanding in beginner javascript developers with the difference between preStart and preStart() functions.
in some cases like this:
SetTimeout(function(){
}, 2000)
you can pass directly a function to the SetTimeout, like you did above, so if your preStart has some logic that you want to execute after 2000 seconds you could:
SetTimeout(preStart,2000)
you can see that the function preStart was passed directly without '()' it doesn't need to be called since the SetTimeout expect the function.
in your case you want to execute the preStart on windows.load, so ou need the '()' to execute it.
So do something like this:
function preStart() {
console.log("Hello");
}
window.location = 'https://www.google.com/';
window.onload = preStart();
Sorry if i i did a curve to explain the question, but i hope it helped.

Related

How to call a function after "Complete page load" and "after all external script execution"?

How to call a function after "Complete page load" and "after all external script execution" ?
I tried all 4 below option, but no luck!!!
$(document).ready..
$(window).load...
window.onload = ...
$(document).ready(function()...
Doing setTimeout works for me, But not sure if this 100% efficient!!!!
setTimeout(function(){
//your code here
}, 3000);
Please advice and help!!!
I have been terribly interested with your question and going deep to the jQuery source I came up with a mad hack :)
But the key point is that you should put this piece of code at the very beginning, right after you plug jQuery:
$.statesNum = 0;
$.fn.ready = function ( fn ) {
$.statesNum++;
jQuery.ready.promise().done( fn ).then(function () {
$.statesNum--;
if ($.statesNum == 0) {
$(document).trigger("afterReady");
}
});
return this;
};
Now whenever you want to execute something after all .ready functions are done you can do like this:
$(document).on("afterReady", function () {
alert("Hey, the ready functions are executed");
});
Scripts are loaded and executed in the order they appear in your HTML. If you have simple scripts, just put things you want to run later at the bottom.
However if you have complex scripts that run asynchronously (meaning they run in parallel), then it is impossible to know if they have finished executing without actually looking at what they do. E.g. do they (or can they) trigger an event that you can listen to? Or maybe you can use "promise" patterns.

Using JS setTimeout in a bookmarklet

I am trying to run some JS code in a bookmarklet in firefox. Here's some basic code to prove the point:
window.setTimeout( function() {alert('i ran');}, 1000 );
when I run code with setTimeout in it, I get the whole page replaced by the counter value that normally gets logged in the console.
Is there a way to catch this output and stop this happening?
Thanks!
Try the following:
javascript:(window.setTimeout(function() { alert('i ran'); }, 1000));void(0);
When you use the javascript: protocol in an address bar (which is what all bookmarklets do), the browser does a document.write on whatever the return value is if it's truthy.
A setTimeout call always returns a number for the timer. To fix this you can either append a void(0); like epoch or as I like to do, wrap it in an IIFE:
(function() {
window.setTimeout( function() {alert('i ran');}, 1000 );
})();

Why windows.onload is executed several times?

I'm binding the window.onload event like this
// It's a little more complex than this, I analyze if there is any other function
// attached but for the sake of the question it's ok, this behaves the same.
window.onload = myfunction;
Onload is triggered twice on my local machine a several times on the production server
If I change it by the jQuery equivalent
$jQuery(window).load(myfunction);
It behaves as expected (executed only once).
Could you help me to understand possible reasons why the first option it's not working as supposed?
Thanks!
The parentheses on your assignment — myfunction() — executes your function. You haven't shown what myfunction does, but this means that the return value from that function is being assigned to window.onload, not the function itself. So, I don't know how that is getting executed, unless you have somehow got that to work, like ending the function with return this;
You want
window.onload = myfunction;
Given the nature of window.onload, it seems unlikely that pure browser events alone are making both calls to myfunction. Therefore, a breakpoint inside your function will help you see the call stack. I've included screenshots for Chrome.
Sample code:
var alertme = function() {
alert("Hello");
}
window.onload = alertme;
function testsecondcall() {
alertme();
}
testsecondcall();
Open your page in Chrome.
After the page has loaded once, open the Developer Tools panel and put a breakpoint on the line inside your function, then refresh the page.
Check the call stack of both times that it breaks. One will be empty (the actual window.onload). The other should give you some information like the following:
On the right, under "Call Stack", you see alertme is called by testsecondcall

How can I profile setTimeout functions existance in JS

I am having a problem understanding which function runs (probably in infinite loop) in my JS code.
Is there a plug\way to see the list of the setTimeout functions that are running?
All you have to do is hook into your setTimeout function and log stuff:
var _temp = setTimeout;
setTimeout = function() {
_temp.apply(this, arguments);
alert(arguments[0]);
};
Put that snippet at the top of your code. Every time anything invokes setTimeout, you'll see exactly who's doing it.
Also, instead of alert, use console.log or something similar.
You can probably use the Firebug Firefox extension to put a breakpoint in. http://getfirebug.com/

Why does this javascript work...but this doesn't?

I load everything on my page.
At the end, I have this script.
<script type="text/javascript">loadNewVideo('u1zgFlCw8Aw',0)</script>
It doesn't work.
But if I substitute it with this, it works.:
<input type="submit" onclick="loadNewVideo('u1zgFlCw8Aw',0);" >
In the .JS file, this is the function:
function loadNewVideo(id, startSeconds) {
alert('In-the-function');
if (ytplayer) {
alert('Found-ytplayer');
ytplayer.loadVideoById(id, parseInt(startSeconds));
}
}
Apparently, "ytplayer" is false in the first one!??
I don't know what ytplayer is, but I imagine this problem has something to do with the DOM not being fully loaded. Have you tried this?
<script type="text/javascript">
$(document).ready(function() {
loadNewVideo('u1zgFlCw8Aw', 0);
});
</script>
edit: If this doesn't work, you will have to give us more information. As Tim and Peter asked you in comments to your question, can you tell us where ytplayer is defined and what it is? I'm assuming it stands for YouTube Player, maybe it's being loaded/defined after you were calling loadNewVideo?
For example, if the code snippet above is above the part where ytplayer is defined in your document, this would still be called before ytplayer is loaded, depending on how you're loading it. As I said, please supply some more information.
I don't have an answer, but perhaps this will help you figure out when the ytplayer component is ready for use:
var startTimer = new Date().getTime();
function ytplayerReadyCheck() {
var ready = !!ytplayer;
if (!ready) {
window.setTimeout(ytplayerReadyCheck,50);
}
else {
var endTimer = new Date().getTime();
alert('ytplayer is now ready!\n\nWe waited '+(endTimer-startTimer)+' milliseconds for it');
loadNewVideo('u1zgFlCw8Aw', 0);
}
}
ytplayerReadyCheck();
Of course, this is scarcely replacement for figuring out where ytplayer is defined in the first place! Perhaps it's defined in a .js file that's dynamically loaded after the document has loaded?
I'd highly recommend getting hold of Firebug so you can more easily debug this kind of thing.
I would say this is because the DOM hasn't totally loaded at that stage. You want to hook the body onLoad event, or use jQuery to get the $(document).ready() hook.

Categories

Resources