如何推迟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.

Answer 1

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.