Show element only if getJSON takes more than n milliseconds?

Question

I have some JavaScript:

surveyBusy.show();

$.getJSON(apiUrl + '/' + id)
    .done(function (data) {
        ...
        surveyBusy.hide();
    })
    .fail(function (jqXHR, textStatus, err) {
        ...
        surveyBusy.hide();
    });

However, I'd like to only issue surveyBusy.show(); if $.getJSON takes more than n number of milliseconds. You get a flicker otherwise. Is there a callback on the getJSON api that can do this? I see nothing in the documentation.

Answer 1

Just use a timeout. Also, I put your "hide" code in the always handler to reduce code repetition.

var busyTimeout = setTimeout(function() { surveyBusy.show(); }, 2000);

$.getJSON(apiUrl + '/' + id)
    .done(function (data) {
        ...
    })
    .fail(function (jqXHR, textStatus, err) {
        ...
    })
    .always(function() {
        clearTimeout(busyTimeout);        
        surveyBusy.hide();        
    });

Answer 2

Put your surveyBusy.show() call inside a timeout and then cancel that timeout (using window.clearTimeout) if the result is returned before it activates:

var busyTimeout = window.setTimeout(function() { surveyBusy.show(); }, 500);

$.getJSON(apiUrl + '/' + id)
    .done(function (data) {
        ...
    })
    .fail(function (jqXHR, textStatus, err) {
        ...
    })
    .always(function() {
        window.clearTimeout(busyTimeout);        
        surveyBusy.hide();        
    });