仅当 getJSON 花费超过 n 毫秒时才显示元素？

Question

我有一些 JavaScript：

surveyBusy.show();

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

但是，如果$.getJSON 花费的时间超过n 毫秒数，我只想发出surveyBusy.show();。否则你会闪烁。 getJSON api 上是否有回调可以做到这一点？我看到nothing in the documentation。

Answer 1

实际上，根据this page, which describes the callbacks for all AJAX routines, 有一个超时回调可以使用。它要求您不要使用$.getJSON 快捷方式。因此，要为这个问题提供真正的答案，是的，它在 API 中，但比 $.getJSON 快捷方式更深。

timeout 类型：Number 设置请求的超时时间（以毫秒为单位）。这将覆盖使用 $.ajaxSetup() 设置的任何全局超时。 超时时间从 $.ajax 调用开始；如果 其他几个请求正在进行中，浏览器没有 连接可用，请求可能在之前超时 它可以发送。在 jQuery 1.4.x 及更低版本中，XMLHttpRequest 对象 如果请求超时，将处于无效状态；访问任何 对象成员可能会抛出异常。仅在 Firefox 3.0+ 中，脚本 并且 JSONP 请求不能被超时取消；脚本将 即使在超时时间之后到达也运行。

Answer 2

这将在surveyBusy 对象中设置一个方法，从而避免在window 对象下创建setTimeout 方法。它为您提供了更多可重复使用的东西！

surveyBusy = {
    onTimer: function(n) {
        elapsed = new Date.getTime() - start;
        if (elapsed > n) surveyBusy.show();
    }
}
surveyBusy.hide();
var start = new Date().getTime();
var elapsed = 0;

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

Answer 3

如果在激活之前返回结果，请将您的 surveyBusy.show() 调用置于超时内，然后取消该超时（使用 window.clearTimeout）：

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();        
    });

Answer 4

尝试设置超时，然后在服务器响应时取消它：

// NOT TESTED

var n = 5000 // milliseconds
var tmr = setTimeout(function(){
    surveyBusy.show();
}, n);

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

Answer 5

使用setTimeout:

var busy = window.setTimeout(function(){
    surveyBusy.show();
}, 1000);

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

Answer 6

var n = 1000; //number of ms to wait
var done = false;
window.setTimeout(function(){
    if(!done){
        surveyBusy.show();
    }
}, n);

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

Answer 7

只需使用超时。另外，我将您的“隐藏”代码放在 always 处理程序中以减少代码重复。

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

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