JQuery : 一定の遅延後に「読み込み中」を表示

ファイナルミックス6

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.setTimeout3000 遅延機能を使用して 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]

編集
0

コメントを追加

0

関連記事

分類Dev

要素jQueryの読み込みの遅延

分類Dev

JQuery:JQueryの遅延読み込みと「$が定義されていません」

分類Dev

jqueryの遅延読み込みをajax呼び出しにmvc4に組み込む方法

分類Dev

画像の読み込み後のJquery遅延読み込み、cssは適用されません

分類Dev

水平スクロールJqueryに遅延読み込みを実装する方法

分類Dev

カスタム遅延読み込み関数がデータをコンテナに読み込んだ後、jQuery関数OnClickが機能しません

分類Dev

jqueryで一定の遅延が発生した後にページを更新する

分類Dev

jqueryでのリストサムネイルの遅延読み込み

分類Dev

ページの読み込み後にJqueryを適用する

分類Dev

jQueryまたは遅延読み込みなしで背景画像を延期する方法

分類Dev

jQuery.Lazy()-IDを持つセクションの遅延読み込みの背景画像

分類Dev

JavaScriptモジュール内のjQueryセレクターの遅延読み込みをどのように実装しますか?

分類Dev

Kendo UIスケジューラの読み込みが完了した後にJQueryを読み込みますか?

分類Dev

JqueryでCSSの読み込みを遅らせる

分類Dev

jquery で画像の読み込みを遅らせる

分類Dev

jquery.uiツールチップ:一定時間ホバーした後にのみツールチップを表示します

分類Dev

要素の読み込み時にjQuery関数を読み込みます

分類Dev

JQuery-画像の読み込み後に関数を呼び出す

分類Dev

jQuery「さらに投稿を読み込む」最後の投稿の場合はボタンを非表示

分類Dev

jQueryで読み込み中のスピナーを表示するにはどうすればよいですか?

分類Dev

jqueryは<select>に読み込みを表示します

分類Dev

ZURBFoundationデータ交換でjquery遅延読み込みプラグインを使用する

分類Dev

絶対位置を持つ要素の新しい高さを見つけるためのjQueryの遅延読み込みと無限スクロールの問題?

分類Dev

ページが最初に読み込まれたとき、および一定期間後に読み込まれたときにjQueryコードを実行します

分類Dev

jQueryの読み込みが遅いImagesrc attr()の使用法

分類Dev

読み込み時間後に表示するdivのjqueryアニメーション

分類Dev

画像の読み込みを遅らせて、画像が読み込まれる前にloading.gifを2〜3秒間表示できるようにするにはどうすればよいですか?(jQuery / javascriptを使用)

分類Dev

ページ読み込み時のJqueryはdivを表示し、別のdivを非表示にします

分類Dev

$ .ajax json GETは、ページの読み込み後にすべてのjqueryを元に戻します

Related 関連記事

  1. 1

    要素jQueryの読み込みの遅延

  2. 2

    JQuery:JQueryの遅延読み込みと「$が定義されていません」

  3. 3

    jqueryの遅延読み込みをajax呼び出しにmvc4に組み込む方法

  4. 4

    画像の読み込み後のJquery遅延読み込み、cssは適用されません

  5. 5

    水平スクロールJqueryに遅延読み込みを実装する方法

  6. 6

    カスタム遅延読み込み関数がデータをコンテナに読み込んだ後、jQuery関数OnClickが機能しません

  7. 7

    jqueryで一定の遅延が発生した後にページを更新する

  8. 8

    jqueryでのリストサムネイルの遅延読み込み

  9. 9

    ページの読み込み後にJqueryを適用する

  10. 10

    jQueryまたは遅延読み込みなしで背景画像を延期する方法

  11. 11

    jQuery.Lazy()-IDを持つセクションの遅延読み込みの背景画像

  12. 12

    JavaScriptモジュール内のjQueryセレクターの遅延読み込みをどのように実装しますか?

  13. 13

    Kendo UIスケジューラの読み込みが完了した後にJQueryを読み込みますか?

  14. 14

    JqueryでCSSの読み込みを遅らせる

  15. 15

    jquery で画像の読み込みを遅らせる

  16. 16

    jquery.uiツールチップ:一定時間ホバーした後にのみツールチップを表示します

  17. 17

    要素の読み込み時にjQuery関数を読み込みます

  18. 18

    JQuery-画像の読み込み後に関数を呼び出す

  19. 19

    jQuery「さらに投稿を読み込む」最後の投稿の場合はボタンを非表示

  20. 20

    jQueryで読み込み中のスピナーを表示するにはどうすればよいですか?

  21. 21

    jqueryは<select>に読み込みを表示します

  22. 22

    ZURBFoundationデータ交換でjquery遅延読み込みプラグインを使用する

  23. 23

    絶対位置を持つ要素の新しい高さを見つけるためのjQueryの遅延読み込みと無限スクロールの問題?

  24. 24

    ページが最初に読み込まれたとき、および一定期間後に読み込まれたときにjQueryコードを実行します

  25. 25

    jQueryの読み込みが遅いImagesrc attr()の使用法

  26. 26

    読み込み時間後に表示するdivのjqueryアニメーション

  27. 27

    画像の読み込みを遅らせて、画像が読み込まれる前にloading.gifを2〜3秒間表示できるようにするにはどうすればよいですか?(jQuery / javascriptを使用)

  28. 28

    ページ読み込み時のJqueryはdivを表示し、別のdivを非表示にします

  29. 29

    $ .ajax json GETは、ページの読み込み後にすべてのjqueryを元に戻します

ホットタグ

アーカイブ