仅当getJSON超过n毫秒时才显示元素?

时间:2013-08-09 13:30:27

标签: javascript jquery html ajax

我有一些JavaScript:

surveyBusy.show();

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

但是,如果surveyBusy.show();的时间超过$.getJSON毫秒,我只想发出n。否则你会闪烁。 getJSON api上是否有可以执行此操作的回调?我看到nothing in the documentation

7 个答案:

答案 0 :(得分:12)

只需使用超时。此外,我将“隐藏”代码放在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();        
    });

答案 1 :(得分:4)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

尝试此设置超时,然后在服务器响应时取消它:

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

答案 4 :(得分:0)

这将在surveyBusy对象中设置一个方法,避免在窗口对象下创建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);
    });

答案 5 :(得分:0)

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

  

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

答案 6 :(得分:-1)

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