Question

我如何点击我的按钮与课程： load-more-reviews ，添加3秒延迟写入＆＃34;正在加载...＆＃34;然后显示数据？

这是我的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
        }
    });
});

Answer 1

您可能应该在进行AJAX调用之前显示消息。一旦完成（它已经达到成功功能），你应该淡出它。

但是，如果你想要3秒的延迟，你可以做类似于我在下面提供的例子。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我只是在按钮点击功能内部的整个代码周围添加了一个超时。这显示了一个加载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');
});

Answer 3

试试这样的事情：

仅在加载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>

Answer 4

您可以使用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);
    }

Answer 5

谢谢你们，我按照你们的指示增加了我的知识。

我正在使用Doutriforce的解决方案和BeforeSend这样：

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

}）;

它的效果非常好！

非常感谢。

JQuery：show＆＃34; loading＆＃34;经过一段时间的延迟

5 个答案: