JQuery：在一定延迟后显示“加载”答案

【问题标题】：JQuery : show "loading" after a certain delayJQuery：在一定延迟后显示“加载”
【发布时间】：2017-04-26 15:17:41
【问题描述】：

我如何在单击类按钮后：load-more-reviews，添加 3 秒延迟写入“正在加载...”然后显示数据？

这是我的 Ajax：

// Loading button

$('button.load-more-reviews').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var product_id = _this.data('product-id');
var limit = _this.data('limit');
var _btn_text = _this.html();
_this.html('Loading...');
_this.attr('disabled', true);
$.ajax({
    type: 'POST',
    url: 'actions/ajax.php',
    data: {
        action: 'fetch_reviews',
        product_id: product_id,
        limitcount: limit
    },
   dataType: 'json',
    success: function(r) {
        _this.html(_btn_text);
        _this.attr('disabled', false);
        console.log(r);
        _this.data('limit', r['limit']);
        if (r['status'] == '1') {
            $('div.reviews-block').append(r['html']);
        } else if (r['status'] == '2') {
            _this.hide();
        }
        return false
        }
    });
});

【问题讨论】：

你在找setTimeout

标签： jquery ajax settimeout

【解决方案1】：

您可以使用beforeSend 事件在发送请求之前显示“正在加载”文本，并使用window.setTimeout 函数延迟3000 以将其替换为3 秒后的结果。

    beforeSend: function() { 
       _this.html('Loading...');
       _this.attr('disabled', true);
    },
    success: function(r) {
      window.setTimeout(function() {
          _this.html(_btn_text);
          _this.attr('disabled', false);
          console.log(r);
          _this.data('limit', r['limit']);
          if (r['status'] == '1') {
              $('div.reviews-block').append(r['html']);
          } else if (r['status'] == '2') {
              _this.hide();
          }
          return false
      }, 3000);
    }

【讨论】：

天哪，这太棒了！我不知道我可以用 beforeSend 显示事件加载。谢谢！
@Finalmix6，还有 complete 事件。您可以在 success 事件之后使用它来做任何您想做的事情。

【解决方案2】：

您可能应该在进行 AJAX 调用之前显示该消息。完成后（达到成功函数），您应该将其淡出。

但是，如果您无论如何都希望延迟 3 秒，则可以执行类似于我在下面提供的示例的操作。

$('#loading-message').fadeIn();

setTimeout(function() {
    $('#loading-message').fadeOut();
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="loading-message" style="display: none;">Loading...</p>

【讨论】：

【解决方案3】：

我只是在按钮单击功能内的整个代码周围添加了一个超时。这显示了一个正在加载的 div，它将在 3 秒后隐藏

试试这个

<div class="loading" style="display: none;">Loading...</div>

$('button.load-more-reviews').on('click', function(e) {
    e.preventDefault();
    $('.loading').show();
    setTimeout(function(){
    var _this = $(this);
    var product_id = _this.data('product-id');
    var limit = _this.data('limit');
    var _btn_text = _this.html();
    _this.html('Loading...');
    _this.attr('disabled', true);
    $.ajax({
        type: 'POST',
        url: 'actions/ajax.php',
        data: {
            action: 'fetch_reviews',
            product_id: product_id,
            limitcount: limit
        },
       dataType: 'json',
        success: function(r) {
            _this.html(_btn_text);
            _this.attr('disabled', false);
            console.log(r);
            _this.data('limit', r['limit']);
           if (r['status'] == '1') {
                $('div.reviews-block').append(r['html']);
            } else if (r['status'] == '2') {
                _this.hide();
            }
            return false
        }
    });
    }, 3000);

    $('.loading').fadeOut('500');
});

【讨论】：

【解决方案4】：

试试这样的：

按钮中的文字Loading仅在ajax加载时显示

$('button.load-more-reviews').on('click', function(e) {
  e.preventDefault();
  var _this = $(this);
  var product_id = _this.data('product-id');
  var limit = _this.data('limit');
  var _btn_text = _this.html();
  _this.html('Loading...');
  _this.attr('disabled', true);
  $.ajax({
      type: 'POST',
      url: 'actions/ajax.php',
      data: {
          action: 'fetch_reviews',
          product_id: product_id,
          limitcount: limit
      },
     dataType: 'json',
      success: function(r) {
          _this.html(_btn_text);
          _this.attr('disabled', false);
          console.log(r);
          _this.data('limit', r['limit']);
          if (r['status'] == '1') {
              $('div.reviews-block').append(r['html']);
              _this.html('TEST');
              _this.attr('disabled', false);
          } else if (r['status'] == '2') {
              _this.hide();
          }
          return false
      },
      error: function(){
        _this.html('TEST');
        _this.attr('disabled', false);
      }
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='load-more-reviews'>TEST</button>

如果 ajax 对你来说太快了，如果你想让一些东西更慢，你可以像这样创建一个setTimeout：

$('button.load-more-reviews').on('click', function(e) {
  e.preventDefault();
  var _this = $(this);
  var product_id = _this.data('product-id');
  var limit = _this.data('limit');
  var _btn_text = _this.html();
  _this.html('Loading...');
  _this.attr('disabled', true);
  $.ajax({
      type: 'POST',
      url: 'actions/ajax.php',
      data: {
          action: 'fetch_reviews',
          product_id: product_id,
          limitcount: limit
      },
     dataType: 'json',
      success: function(r) {
          _this.html(_btn_text);
          _this.attr('disabled', false);
          console.log(r);
          _this.data('limit', r['limit']);
          if (r['status'] == '1') {
              $('div.reviews-block').append(r['html']);
              setTimeout(function(){
                  _this.html('TEST');
                  _this.attr('disabled', false);
              }, 3000);
          } else if (r['status'] == '2') {
              _this.hide();
          }
          return false
      },
      error: function(){
        setTimeout(function(){
            _this.html('TEST');
            _this.attr('disabled', false);
        }, 3000);
      }
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='load-more-reviews'>TEST</button>

【讨论】：

谢谢大家，我明白了！它有效！

【解决方案5】：

谢谢你们，我听从了你们的指示，增加了我的知识。

我正在使用带有 BeforeSend 的 Doutriforce 解决方案，如下所示：

// Loading button
$('button.load-more-reviews').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var product_id = _this.data('product-id');
var limit = _this.data('limit');
var _btn_text = _this.html();
_this.attr('disabled', true);
$.ajax({
    type: 'POST',
    url: 'actions/ajax.php',
    data: {
        action: 'fetch_reviews',
        product_id: product_id,
        limitcount: limit
    },
   dataType: 'json',
    beforeSend: function() {
    _this.html('<img src="img/loader/ajax-loader.gif" /> &nbsp; Loading...')
    },
    success: function(r) {
        window.setTimeout(function() {
            _this.html(_btn_text);
            _this.attr('disabled', false);
            console.log(r);
            _this.data('limit', r['limit']);
            if (r['status'] == '1') {
                $('div.reviews-block').append(r['html']);
            } else if (r['status'] == '2') {
                _this.hide();
            }
            return false
        }, 3000);
    }
});

});

而且效果很好！

非常感谢。

【讨论】：