僅當AJAX調用需要超過500毫秒時才顯示「加載」框

-1

我試圖讓AJAX請求花費超過500毫秒時出現「加載」div。當請求完成時，div會再次隱藏。僅當AJAX調用需要超過500毫秒時才顯示「加載」框

我使用的代碼如下。它應該可以工作，但它不會。這是爲什麼？

var timer; 
$(document).on({ 
    ajaxStart: function() { 
     timer && clearTimeout(timer); 
     timer = setTimeout(function() { 
      $('#loading').show(); 
     }, 500); 
    }, 
    ajaxStop: function() { 
     clearTimeout(timer); 
     $('#loading').hide(); 
    } 
});

來源

2015-09-25 Jeff

這是一個跨域請求嗎？這些事件不會爲這些事件開火。 –

不，這不是跨域請求。 – Jeff

它是如何失敗的？它是否完全符合回調？也就是說，如果你在ajaxStart函數中放置了alert/console.log/breakpoint，它會發生什麼？ –

我建議你使用方法的記錄用法，而不是on()。這些AJAX事件不DOM事件

$(document).ajaxStart(function() { 
     timer && clearTimeout(timer); 
     timer = setTimeout(function() { 
      $('#processing').show(); 
     }, 500); 
}).ajaxStop(function() { 
     clearTimeout(timer); 
     $('#processing').hide();  
});

參考：$.ajaxStart() docs

如果你還有問題做一些差別更深層次的分析，時值2個事件觸發

來源

2015-09-25 22:12:04 charlietfl

它不起作用。時間的差異似乎合法。 – Jeff

ajax是否存在？頁面中是否只有一個ID？ 2個事件發生了嗎？很難在沒有更多反饋的情況下排除故障 – charlietfl

是的，它確實存在。事實上，如果我簡化代碼以便它只顯示和隱藏元素（不使用任何超時），它就可以正常工作。只有一個元素具有這樣的ID。 Firebug不會拋出任何錯誤。 – Jeff

對於我來說，你的代碼工作就好：

$(function() { 
 
    var timer, d; 
 
    $('#processing').hide(); 
 
    
 
    $(document).on({ 
 
    ajaxStart: function() { 
 
     console.log('started'); 
 
     d = performance.now(); 
 
     clearTimeout(timer); 
 
     timer = setTimeout(function() { 
 
     $('#processing').show(); 
 
     }, 300); 
 
    }, 
 
    ajaxStop: function() { 
 
     console.log('finished in ' + (performance.now() - d)); 
 
     clearTimeout(timer); 
 
     $('#processing').hide(); 
 
    } 
 
    }); 
 
    
 
    $('#load').on('click', function(e) { 
 
    $.get('https://api.github.com/repos/joyent/node/issues?state=closed').then(function(res) { 
 
     $('#result').html('<pre>' + JSON.stringify(res, null, 2) + '</pre>'); 
 
    }); 
 
    }); 
 
    
 
    $('#load2').on('click', function(e) { 
 
    $.get('https://api.github.com/repos/twbs/bootstrap/issues?state=closed').then(function(res) { 
 
     $('#result').html('<pre>' + JSON.stringify(res, null, 2) + '</pre>'); 
 
    }); 
 
    }); 
 
    
 
    $('#load3').on('click', function(e) { 
 
    $.get('https://api.github.com/users/buzinas').then(function(res) { 
 
     $('#result').html('<pre>' + JSON.stringify(res, null, 2) + '</pre>'); 
 
    }); 
 
    }); 
 
    
 
    $('#clear').on('click', function(e) { 
 
    $('#result').html(''); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='load'>Load node.js closed issues</button><button id='load2'>Load Bootstrap closed issues</button><button id='load3'>Load Buzina's Github Profile</button><button id='clear'>Clear resuts</button> 
 
<img id='processing' width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"> 
 
<div id="result"></div>

第一次嘗試加載庫時，需要超過300毫秒，圖像纔會顯示。第二次，它們將被瀏覽器緩存，並且將會少於300毫秒，並且圖像不會。你可以看到你的控制檯裏發生了什麼。

可能已經在第一次嘗試加載我的配置文件時，它將花費不到300毫秒，並且圖像也不會顯示。

注：我已經更改爲300ms僅用於測試目的，因爲可能更快的連接將不會花費500毫秒來加載Github API。

來源

2015-09-25 22:31:13 Buzinas

僅當AJAX調用需要超過500毫秒時才顯示「加載」框

回答

相關問題