As is evident when the document gets loaded in the client browser,
$(function(){
some code here
});
takes over.
Say I have two JavaScript files main.js and style.js
main.js is for the functionality and style.js for some hypothetical styling when the page loads. I want both the files. I include them in my index.html first style.js then main.js both of them start with:
$(function(){
some code here
});
My question is, what is the order of execution of document.ready is it that main.js and style.js start doing things parallely or is it sequential, once style.js has finished what it should do then main.js takes over??
It is sequential. There is no parallel processing in javascript. They will be called in the order you included your scripts on the page.
This is a good answer too: Can you have multiple $(document).ready(function(){ ... }); sections?
Well you can have multiple document.ready but that affects the readability of the code. More has been explained here
Javascript wont execute the code parallel by default, to execute a code in background you need to create webworkers. Currently your code work on first come first basis.
Related
Basically, we have a massive core.js file with lots of jQuery calls that have no structure whatsoever. Example:
$(document).ready(function() {
$(document).on({
change: function() {
// some code specific to 1 view
}
},
"#some-id-name-that-may-exist-in-multiple-views" // like "bank-box"
});
// This code isn't even inside a closure, so it get's executed in all views but '.metadata' only exist in one, braking the whole system.
checkProgress($.parseJSON($('.metadata').text()));
Now, as the comment says, it has happened before that a whole section of the system breaks because of a JS error that usually happens due to the share of JS code. (Ironically, thanks to the sharing of said code, Continuous Integration caught it because of the only 1% of the code that's tested)
How do I justify the usage of separate JS files that holds view-specific logic, instead of a massive core.js that exist because of the "the browser would cache all of the JS on the first load" argument. Any resources or links are welcome.
On the other hand, maybe multiple files is an incorrect approach and we need to have 1 core.js file, but the code should be in a different way so that it doesn't conflict like it does right now. If this is the case, then how.
You can first check for the existence of those elements, that you are working on. You could rewrite your this code like this:
if( $(".metadata").length ){
checkProgress($.parseJSON($('.metadata').text()));
}// if $(".metadata").length
My page uses Less files that are compiled on the client side. I want to load some of those files after page finished loading.
I tried the "Less in the browser" way, but it seems to only work for files that were originally declared in the head part of the page. Declarations I add later (from Javascript) are not processed by the Less...
Another way I tried was "Programmatic Usage", but in this case I have to inject the CSS code myself. It means I cannot use less.modifyVars() any more to change styling later (or I have to trigger recompilation myself and then replace the generated CSS, which I want to avoid).
I like the first way more, but I don't know how to load files after page finished initial loading. Maybe there is a function to load Less file?
Thank you!
I think I found solution:
less.registerStylesheets().then(
function () {
less.refresh();
}
);
First function will reread declarations. The second one will recompile all files (actually not very good).
I have a page I want to load that has sections that are making API calls. I don't the page to wait to load until those are done. I would like the page to load and then the other sections to appear after they are finished.
Right now, this is what I have but it's not getting the results I want and even with this it's still waiting for a lot to process and not loading the page first, even though it seems like it should be.
<script>
$(window).load(function(){
$(".my-div").append('<%= my_function %>');
});
</script>
Assets
Don't use erb code in your asset pipeline
Including that code in your layout or view will be okay, but if you're including in app/assets/javascripts/any_file.js, it won't work
ERB code can only be processed by js in views folders (mainly because of the precompile process of the asset pipeline)
Appending
As pointed out in the comments, you'd be better waiting until the document has loaded, like this:
$(document).ready(function() {
//your code
});
However, if you're using turbolinks, you'd be better using something like this:
var load = function() {
//append code here
};
$(document).ready(load);
$(document).on('page:load', load);
Functionality
Curiously, you've omitted one of the most important aspects of your code -- how you're retrieving the data. If you can reply with your asynchronous function, it will be a great help!
I need to load some Javascript dynamically after the page has loaded.
Something like this:
page loads
page adds script element with src = "file1.js"
page adds script element with src = "file2.js"
file2.js has a dependency on file1.js - it adds properties to an object defined in file1.js
The problem is that file2.js is loading first (because it is smaller), and is immediately throwing an error because its dependency doesn't exist.
Is there a way for me to defer evaluation/execution of these new scripts until they have all loaded. (There is actually more than two scripts)
If I were to just embed these scripts in a page normally in authored HTML, then it seems that the browser loads all scripts, then evaluates them. But it is behaving differently because I'm adding script elements on the fly.
Thanks
There's a library called RequireJS that handles exactly this situation, and handles every situation you never realized were problems - http://requirejs.org/docs/start.html
Can't you wrap the contents of the files in functions and call them after everything has loaded?
Two suggestions for you:
Have a look at http://requirejs.org/ It solves this problem, among
others.
Or, roll your own simple js loader function. It would be a function that
uses ajax to load a script and then calls a callback when it's done.
Call this loader function in a nested way so that you load your
scripts in the right order.
I read several articles saying it is not recommended to put javascript code within the page.
I would like to hear from you.
How do you do with that code that is specific to that page?
Sample
In my Project.cshtml I have:
<script type="text/javascript">
$(document).ready(function () {
$('.project-status').parent('a').click(function (e) {
e.preventDefault();
DoSomething();
});
});
</script>
Have in my myfunctions.js file:
function DoSomething() {
alert('test')
}
On every page of my project, this situation repeats itself.
Question
You make a single file .js and put there all the javascript for all pages?
Or make one file per page, and make reference that file on the page?
Or put the js code that is specific to the page in the page itself?
The problem we want to solve
I had this question for I am with the following problem:
In my application I have:
Project.cshtml
When you click a link, load the page ProjectPhotos.cshtml via ajax into a div#photos
The problem is that on my page ProjectPhotos.cshtml have the script:
<script type="text/javascript">
$(document).ready(function () {
$('.project-status').parent('a').click(function (e) {
e.preventDefault();
DoSomething();
});
});
</script>
As this page is loaded via ajax, this script will not in the HTML markup.
If this script was in a separate JS file, click on the link, I could load the file dynamically.
Thank you all for your help!
It depends. If the scripts are fairly small, concatenating the files into one is better because you reduce the number of connections (the browser will usually use just a few simultaneous connections).
But if the scripts are big, and the scripts are not needed on all pages, it's probably better to split it up. But still preferably only one file per page.
Try both options and disable/empty cache in your browser and test...
Probably the best way is to put everything in one file for two reasons. One maintenance is easier there is only one script to deal with instead of searching through seven. Second once the script is loaded it is cached. Meaning it is ready for all your other pages as well. Assuming you don't have scripts that are huge for each individual page the overhead is not really that much.