Geek Answers Handbook

Turn an array into a function by creating a javascript loader with jquery

how can we make a function from arrays like

$.loader({ js: [ ['1.js','3.js','2.js'], ['4.js'], ['5.js'] ] });

into what does

 $.when( $.getScript("1.js"), $.getScript('3.js'), $.getScript('2.js')) .then( function(){ $.getScript('4.js').then(function(){ $.getScript('5.js'); }) });

what is currently working on

 loader: function(arg){ var js = arg; var phase = 0; for (var i = 0; i < o.length; i++) { console.log(o[i]); $.each(o[i], function(key,src) { //append javascript }); }; }

enter image description here

The problem is that I do not know where to start. what I mean

  • I divide them into phases.
  • set phase 0, it will start an array of fists, but how can I do this? $.getScript(src) for each stack associate professor src. or chains. maybe this is one of them? e.g. string + = $.getScript(src). , so it will be like $.getScript("1.js").getScript("3.js").getScript("2.js") until in this example there are arrays of a string that is 3. then do something like append $.when( infront of the line, and then at the end of the line we put .then(function(){ until it ends, and then somehow closes the line.
  • OK, I don’t know (and here comes the message on stackoverflow)
+4
source share
3 answers
 function lScripts(startAt){ for (var i = startAt; i < js.length; i++) { if (js[i].constructor == Array){ for (var j = 0; j < js[i].length; j++) { if(j==js[i].length){ $.getScript('js[i][j]',function(){ lScripts(startAt+1); }); }else{ $.getScript('js[i][j]'); } } }else{ $.getScript('js[i]',function(){ lScripts(startAt+1); }); } } } lScripts(0);
+1
source

Just to be clear, are you talking about writing a solution yourself that loads a bunch of scripts? If so, do not do it yourself. Stand on the wrong shoulders.

RequireJS is already doing what you ask. http://requirejs.org/

It even has documentation for use with jQuery. http://requirejs.org/docs/jquery.html

Someone else did the hard work, wrote and tested a good product. Save yourself time and stress.

+1
source

Hope this is what you mean: http://jsfiddle.net/pimvdb/hdN3Q/1/ .

 (function($) { function load(files, index) { var arr = []; // fill arr with getScript requests (fake here) for(var i = 0; i < files[index].length; i++) { arr.push(console.log(files[index][i])); } // call $.when with arr as array of arguments (using apply) $.when.apply(null, arr).then(function() { if(index < files.length - 1) { // if we have to move to the next chunk, // load that next one setTimeout(function() { // timeout is to show they get processed in chunks load(files, index + 1); }, 1000); } }); } $.loader = function(obj) { load(obj.js, 0); } })(jQuery); $.loader({ js: [ ['1.js','3.js','2.js'], ['4.js'], ['5.js'] ] });

.apply essentially does the same thing as calling a function. However, since the number of $.when arguments differs depending on the input, you cannot just call $.when(...) because you do not have a fixed number of arguments. The method of calling a function with a variable number of arguments uses .apply . It works as follows:

 someFunction(1, 2, 3);

equally:

 someFunction.apply(null, [1, 2, 3]);

( null refers to the execution context, which is out of scope here.) The great thing is that you can build an array of any size. Thus, you can call a function with any number of arguments in this way.

In load , the arr function is populated with getScript functions, and it works the same way:

 var arr = [getScript('file1'), getScript('file2')]; $.when.apply(null, arr);

equally:

 $.when(getScript('file1'), getScript('file2'));

In load we populate arr with fragment files, for example. in your case, the first snippet is 1.js , 3.js and 2.js This is done using a for loop, but the array you get into can just jump to .apply .

When all files are loaded, .then is called. The function we go through there should load the next fragment, but only if there is the next fragment. If there are 3 pieces, it should go to the next when index is 0 or 1 . When chunk 2 finished, there is no next fragment, so it should not continue next, since there is no next.

So we need this if clause:

 if(index < files.length - 1) {

Say files.length 3 . Then this if conditional will pass only when index is 0 or 1 , what we want.

+1
source

More articles:


All Articles