Run function once only after load()

Question

I'm using jquery load() to load multiple items. All works good.

for(i = 0; i<item.length; i++){
   $( '#parent'+i).load('file'+i+'.html',function(){
       customFunctions();
   });
}

My question is, I need to run customFunctions() when all completes loading. My above code runs it multiple times. How can I run customFunctions() once only after all files complete loading?

Why dont you just call it at the end of `$(document).ready()`? @Becky — Varun, Jul 03 '15 at 13:45
Your posted code doesn't really make sense. Aren't you passing any data to server? Otherwise, why calling the exact same request in a for loop? — A. Wolff, Jul 03 '15 at 13:47
@Varun thanks but this is triggered after the page loads. So `$(function() { }`will not work. — Becky, Jul 03 '15 at 13:47
Of course it is called multiple times – you are calling it inside a loop!? — feeela, Jul 03 '15 at 13:47
@Varun You don't really need any of those ready events – just include all of your JS at the end of the HTML file. — feeela, Jul 03 '15 at 13:48
@feeela thanks - I know. That's my question I've inlucded it inside the for loop because I'm not certain if it should be out of the `load()`'s callback. — Becky, Jul 03 '15 at 13:49
You should use [$.ajax](http://api.jquery.com/jquery.ajax/) instead. That will return a promise-like object which you can use [$.when](https://api.jquery.com/jquery.when/) on to check that all of the requests are finished — CodingIntrigue, Jul 03 '15 at 13:49
Wait, you'd have better to explain what is your expected behaviour instead — A. Wolff, Jul 03 '15 at 13:50

Walter Chapilliquen - wZVanG · Accepted Answer · 2015-07-03T14:16:09.127

4

It is about making promises, but you could also do this:

var all_loaded = 0;

for(var i = 0; i < item.length; i++){
   $( '#parent' + i).load('file' + i + '.html',function(){
      ++all_loaded == item.length && customFunctions();
   });
}

//++all_loaded: mean It is sum +1 when a file is loaded

So when all_loaded is equal to item.length, the function is loaded just at the end.

edited Jul 03 '15 at 14:16

answered Jul 03 '15 at 13:47

Walter Chapilliquen - wZVanG

12,010
8
40
64

1

But still doesn't explain the purpose of the `for` loop – A. Wolff Jul 03 '15 at 13:48
I guess the reason the loop is that he wants to change the filename like `'file' + i + '.html'` – Walter Chapilliquen - wZVanG Jul 03 '15 at 13:53
Ya, that was my first thought before reading OP's comment: `That's my question I've inlucded it inside the for loop because I'm not certain if it should be out of the load()'s callback`. So instead, sounds like a XY problem. – A. Wolff Jul 03 '15 at 13:54
@Becky This would call exact same request many times, so it cannot be good – A. Wolff Jul 03 '15 at 13:58
@A.Wolff I prefer `Bhojendra Nepal`'s answer... Any comments on that? – Becky Jul 03 '15 at 13:59
@Becky That's the exact same behaviour. You should explain instead what is your expected behaviour because your posted code doesn't really make sense. Why would you want to call same request multiple times? (knowing the fact that a HTML file is static) – A. Wolff Jul 03 '15 at 14:01
@Becky That's SO... Now why don't you explain in question itself expected behaviour??? As i can guessing, you want the `for` loop inside `load()` complete callback, not the opposite – A. Wolff Jul 03 '15 at 14:02
@Becky That's ok then, makes more sense now. And btw, this asnwer should work as i see it – A. Wolff Jul 03 '15 at 14:05
@A.Wolff what does the `&&` do? – Becky Jul 03 '15 at 14:07
1

@Becky I'm not the poster but that's a shortcut for `if(++all_loaded == item.length) customFunctions();` – A. Wolff Jul 03 '15 at 14:08
1

@Becky is equivalent to `if(++all_loaded == item.length){ customFunctions() }` – Walter Chapilliquen - wZVanG Jul 03 '15 at 14:08
@A.Wolff I know I'm very new to coding but never seen that before. Thank you! – Becky Jul 03 '15 at 14:10
1

@Becky It is a way of doing things in short. See this [answer](http://stackoverflow.com/a/11069385/1074519) – Walter Chapilliquen - wZVanG Jul 03 '15 at 14:12
why is the ++ is infront of `all_loaded`? – Becky Jul 03 '15 at 14:13
1

`++all_loaded` mean It is sum +1 to a variable. Is equivalent to: `all_loaded += 1` – Walter Chapilliquen - wZVanG Jul 03 '15 at 14:17

score 1 · Answer 2 · answered Jul 03 '15 at 13:49

1

Add counter and update it when each file is loaded. When current value of counter will be equal to total files count you want to load, then call your function;

answered Jul 03 '15 at 13:49

Viktor Kireev

1,200
1
8
17

score 0 · Answer 3 · answered Jul 03 '15 at 13:48

0

for(var i = 0; i<item.length; i++){
   $( '#parent').load('file.html',function(){
      if(i==(item.length-1))
          customFunctions();
   });
}

This should work.

answered Jul 03 '15 at 13:48

Varun

1,946
2
11
17

score 0 · Answer 4 · answered Jul 03 '15 at 14:04

Try This:

Your function will run only if all load request is successful

var item = {length:12};
runfunction = 0;
for(i = 0; i<item.length; i++){
   $( '#parent').load('t.html',function(responseText, textStatus, XMLHttpRequest){

      if (textStatus == "success") {
            runfunction++;
       }
       /* you can write three line of code any where even after for loop according to your requirements*/
       if(runfunction == item.length ){
        customFunctions();
       }
   });
}

function customFunctions(){
 alert(1);
}

score 0 · Answer 5 · answered Jul 03 '15 at 14:09

There are a number of options.

You can just keep track in your loop:

var loadedCount = 0;
for(i = 0; i<item.length; i++){
  $( '#parent').load('file.html',function(){
    loadedCount++;
    if (loadedCount === item.length) {
      customFunctions();
    }
  });
}

That will get the job done for this specific case. This only works in this constrained design where you know how many times you are calling and can trust/believe that none of your AJAX requests will fail. As a result, it is not a very stable design.

Run function once only after load()

5 Answers5