Wait until function is loaded

Question

How can I in jQuery test when a javascript function is fully loaded? I would like to use a gif, which displays loading, while the javascript function loads, and hide it when the function is fully loaded?

See similar question re showing an animated gif while running a function: http://stackoverflow.com/questions/210821/how-can-i-give-control-back-briefly-to-the-browser-during-intensive-javascript — Crescent Fresh, Apr 27 '09 at 11:36
Do you mean "loaded" as in "when the function has been downloaded", or more like "when the function has completed execution"? — nickf, Apr 27 '09 at 12:07

score 10 · Accepted Answer · answered Apr 27 '09 at 11:41

10

$(function(){
    $("#loadingGIF").show();
    WaitForFunction();
});

function WaitForFunction()
{
    if (!$.isFunction(FUNCTION_TO_WAIT_ON_HERE)) {
       setTimeout( WaitForFunction, 100);
       return;
    }
    Function_Loaded();
}

function Function_Loaded(){
      $("#loadingGIF").hide();
}

answered Apr 27 '09 at 11:41

Chad Grant

44,326
9
65
80

1

Wouldn't a loop be better than recursion here? Granted, it shouldn't take too terribly long to download the script, but if there is a network error the stack'll overflow and performance will decrease or the browser will crash. – Jim Keener Apr 29 '09 at 05:42
3

This is both a loop and recursion. It's a conditional loop (not a `for` or `while`), and it's calling itself, so it's recursive. Just because there is a delay, does not make it any less recursive and all recursion has a stopping condition, otherwise there would be an infinite loop. – vol7ron Sep 12 '11 at 17:00
@vol7ron If I understand correctly it is **not** recursive because `setTimeout` does not call the given function but instead add it to an event queue. So basically `setTimeout` returns immediately and so does `WaitForFunction`. So what we have here is maybe an infinite event chain (similar to `setInterval`). – Fuujuhi Dec 27 '17 at 02:58
Possibly a matter of semantics, but I think it could be both. If it’s called again as a result of the same event that initially triggered it, why wouldn’t it be considered recursive? Whether it’s from being added to a stack or some other mechanism seems to be a manner of implementation – vol7ron Dec 27 '17 at 03:07
Yes, I understand your point of view. But the whole thread started with Jim's comment about stack usage, and usually *recursion* implies an increasing usage of the stack which is not the case here. Another difference here is that the calling function cannot use the result of the function called, so some recursion patterns fail. We could work around this by passing a *state* object, and each iteration would add to this state object. This would lead to increased usage of the heap but not of the stack. – Fuujuhi Dec 27 '17 at 14:05

score 1 · Answer 2 · answered Apr 27 '09 at 11:31

1

Just call yourself after defining the function. The statements after the function definition will only be executed after the preceding source text is read (and thus executed).

answered Apr 27 '09 at 11:31

David Schmitt

58,259
26
121
165

that's not what was asked, you are assuming he is not dynamically loading a script via $.getScript – Chad Grant Apr 27 '09 at 11:53

score 1 · Answer 3 · answered Apr 27 '09 at 12:02

I'm not sure what you mean by loading but the following should apply anyway:

When you start loading the JavaScript code, display the GIF
In the code you load, add a statement to hide the GIF at the end

This should solve your problem in a "simple" way without having to use timers, etc.

Wait until function is loaded

3 Answers3