load-more-reviewsというクラスのボタンを一度クリックし、「Loading...」と書かれた 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
}
});
});
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);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加