Question

我试图这样做，以便当一个AJAX请求超过500毫秒时，一个＆＃34; loading＆＃34; div出现了。请求完成后，div会再次隐藏。

我使用的代码如下。它应该工作，但它没有。那是为什么？

    Stock StockServices = (Stock) applicationContext.getBean("astock");

    Stock stock = new Stock();
    stock.setStockCode("123");
    stock.setStockName("AAPL");

    StockDetail stockDetail = new StockDetail();
    stockDetail.setCompName("Apple");
    stockDetail.setCompDesc("A hardware and software company");

    stockDetail.setStock(stock);
    stock.setStockDetail(stockDetail);

    sessionFactory.getCurrentSession().saveOrUpdate(stock);

Answer 1

我建议您使用方法的记录用法而不是on()。这些是ajax事件而非dom事件

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

参考：$.ajaxStart() docs

如果您仍然遇到问题，请对2个事件触发时的时间差异进行更深入的分析

Answer 2

对我来说，你的代码工作正常：

$(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。

显示＆＃34; loading＆＃34;仅当AJAX调用超过500毫秒时才使用框

2 个答案: