Set minimum wait time for AJAX callback action

Question

I have an app built in HTML that loads fullscreen inside a modal with $.get()

I have a loading screen that is triggered when someone clicks the icon to load the app.

I want the loading screen to appear for a minimum of 2 seconds before clearing out and showing the app.

Is there a good, safe way to start a timer that runs for 2000 milliseconds, checks a variable that is populated by the callback to see if it is null, and then proceeds with a certain action only when the variable is loaded?

I know a while loop will do the trick, but might cycle 1000 times before the content loads on a slow day, and this seems like an inefficient way to do things.

Answer

$('#testApp').click(function() {
    var twoSecMin = $.Deferred();
    setTimeout(function () { twoSecMin.resolve(); }, 2000);
    $('#appModal').fadeIn(400);
    $.when($.get("/usm/portal/_layouts/monkeysphere/test.aspx"),twoSecMin).then(function (data) {
        $('#appContainer').html(data[0]);
        $('#appContainer').show();
        $('#appModal').fadeOut(200);
    });
});

Monostylous

Answer 1

If you're using a recent version of jQuery (1.5 or later), you can create a $.Deferred and resolve it with a fixed timeout:

var twoSecMin = $.Deferred();
setTimeout(function () { twoSecMin.resolve(); }, 2000);

Also, save the jqXHR returned by $.get, which is an extended Deferred object:

var ajaxReq = $.get("/usm/test.aspx", ...);

Then wait for both:

$.when(twoSecMin, ajaxReq).then(function (_, res) {
    // ready...

    var data = res[0];
    // ...
});

Orthotropic

This looks promising, let me try it out – Monostylous

It's stalling forever, which is likely my fault. Going to post my current code, and try to fix it. – Monostylous

@Monostylous Ah. ajaxReq isn't for the data in the callback. You want to set it to the jqXHR (an extended XMLHttpRequest) object that performs the request. var ajaxReq = $.get("/usm/portal/_layouts/monkeysphere/test.aspx");. – Orthotropic

Already marked this right, because it's MOSTLY working. Reposted my code above, and now I'm getting it to work, but I'm getting too much data back. If you don't want to answer here, I'll repost as it's technically a separate question. – Monostylous

Found it. Answer posted above – Monostylous

Answer 2

You could probably just use a setTimeout(fn, 2e3) to do this.

For testing if your variable is null, you could use yourVariable === null.

Revoke

Gotcha. The trick is, how to get it to check again without looping like crazy if x === false – Monostylous

@Monostylous You probably want to re-architect your code to use a callback. – Revoke

Check my code above from the edit, it might make the question clearer. I want to execute the callback IFF it has been more than 2000 milliseconds – Monostylous

@Monostylous Can you just move the setTimeout() into the callback of your $.get()? – Revoke

I could, but it's possible that the $.get itself (theoretically) will take 2000 milliseconds to execute, and I don't want to make user wait longer than necessary. Once the callback fires, I just want to wait the remainder of unused time from isReady – Monostylous