How to defer function execution in jQuery

Question

I am insanely confused today by all of the code available on deferring jquery execution.

Right now I have this written

 $('#filterTheTable').click(function () {
                        $('#waitingGif').show('fast')
                                 .promise()
                                 .done(FilterTable);

So the GIF shows up, the table filters itself after a couple seconds, and all is good (except I haven't hidden the GIF.

So I throw in this...

 $('#filterTheTable').click(function () {
                        $('#waitingGif').show('fast')
                                 .promise()
                                 .done(FilterTable);
 $('#waitingGif').hide('fast');

And as many of you probably see already, what happens is the gif flashes for a second, and the FilterTable function continues to execute.

I have read a few things but can't seem to wrap my head around deferred functions. So I gave up and put the hide('fast') code in FilterTable but now the GIF freezes while the function executes.

Then I figured oh maybe I can just call promise again!

 $('#filterTheTable').click(function () {
                        $('#waitingGif').show('fast')
                                 .promise()
                                 .done(FilterTable)
                                 .promise()
                                 .done(Function(){$('#waitingGif').hide('fast')});

But I get an error that promise isn't supported on that object (I assume now that .Done() is not returning the right type)

I know this has to be easy to do... but I just don't seem to have my mind wrapped around this. Are there any good posts / solutions that can get me back on the rails?

Thanks a million everyone.

Is your goal to show a loading image while your gif loads, then remove it when its complete, then show the gif? — Mike, May 21 '14 at 19:31
`.done().promise()` doesn't make sense. What was the thought process there? .done() already returns the same promise. — Kevin B, May 21 '14 at 19:31
@Epik My goal is to show the loading gif, then run the code while the gif spins away, and then hide it. — TheNorthWes, May 21 '14 at 20:08
@KevinB I was just trying to chain promises together, so do x, then do y, then do z — TheNorthWes, May 21 '14 at 20:10
[Here is exactly what you're looking for.][1] [1]: http://stackoverflow.com/questions/51352/how-to-show-a-spinner-while-loading-an-image-via-javascript — Mike, May 21 '14 at 20:13

score 0 · Accepted Answer · edited May 23 '17 at 12:05

So I found the answer. Basically I was doing in right when I was doing ShowGif.Promise.Done(Function) and then within Function hiding the gif. The answer to the gif freezing is in this great answer.

In summary, DOM heavy operation's don't play nice with your GIF animation. You can split the function up so that it emulates multi threading. To do that you just need to split up the function and let the DOM breathe

Thanks everyone.

How to defer function execution in jQuery

1 Answers1