web-dev-qa-db-ja.com

特定のリクエストに対してajaxStart（）およびajaxStop（）を無効にします

.ajaxStart（）と.ajaxStop（）を使用して、ajaxリクエストの作成中にモーダルを表示しています。 （開始と停止の間）

ここで、このサイトの左上隅にあるような、通知を待機し続けるlongpoll関数を追加したいと思います。

私の問題は、ロングポーリング要求に対してのみこのモーダルを無効にすることにあります。

「ロード画面」オンおよびオフハンドラーの登録：

_$(document).ajaxStart(handleAjaxStart);
$(document).ajaxStop(handleAjaxStop);
_

私のlongpoll関数：

_$.ajax({
    timeout: 35000,
    url: longPollUrl,
    success: function(data){
        if(data.queCount) $('#numQueCount').html(data.queCount);
        if(data.queAccept) $('#numQueAccept').html(data.queAccept);
    }, 
    dataType: 'json',
    complete: longpoll
});
_

私は試した：

_$().off('ajaxStart');
$().off('ajaxStop');
_

..そして、ポーリングを開始した後にハンドラを再接続しますが、喜びはありません。

また、関数の最初の行で返されるhandleAjaxStart()にグローバル変数を導入しようとしましたが、それはロード画面を完全に殺すようです。

どのようにこれを達成することができますか？

ajaxjquerylong-polling
70
Gung Foo

私はそれを考え出した..

globalと呼ばれるオプションオブジェクト.ajax()には属性があります。

Falseに設定すると、呼び出しのajaxStartイベントはトリガーされません。

$.ajax({
    timeout: 35000,
    url: longPollUrl,
    success: function(data){
        if(data.queCount) $('#numQueCount').html(data.queCount);
        if(data.queAccept) $('#numQueAccept').html(data.queAccept);
    }, 
    global: false,     // this makes sure ajaxStart is not triggered
    dataType: 'json',
    complete: longpoll
});
177
Gung Foo

考えられるすべてのソリューションを読んだ後、答えを組み合わせたいと思います。

解決策1：バインド/バインド解除

_//binding
$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

//Unbinding
$(document).unbind(".mine");
_

これは減価償却ソリューションです。 jQuery 1.9より前は、ajaxStart、ajaxStop、ajaxErrorなどのajaxのグローバルイベントを任意の要素にバインドできます。 jQuery 1.9以降：

JQuery 1.9以降、.ajaxStart（）メソッドで追加されたものを含む、jQueryグローバルAjaxイベントのすべてのハンドラーをドキュメントに添付する必要があります。

したがって、これらのイベントをカスタム名前空間にバインド/バインド解除することはできません。

解決策2：プロパティglobalをfalseに設定します

_$.ajax({
        url: "google.com",
        type: "GET",
        dataType: "json",
        global: false, //This is the key property.
        success: function (data) {
                   console.log(data);
                },
        error: function (data) {
                   console.log(data);
                }
       });
_

このソリューションは、ajaxStart()/ajaxStop()イベントを無効にするように機能します。ただし、_ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess()も無効にします。これらのグローバルイベントを使用しない場合は問題ありませんが、必要な場合は、_global: false_を設定したすべてのページに戻ってソリューションを変更する必要があります。

解決策3：グローバル変数を使用する

_var showLoadingEnabled = true;
$(document).ready(function () {
    $('#loading')
        .hide()  // at first, just hide it
        .ajaxStart(function () {
            if (showLoadingEnabled) {
                $(this).show();
            }
        })
        .ajaxStop(function () {
            if (showLoadingEnabled) {
                $(this).hide();
            }
        });
});


function justAnotherFunction() {
    window.showLoadingEnabled = false;
    $.ajax({
        url: 'www.google.com',
        type: 'GET',
        complete: function (data) {
            window.showLoadingEnabled = true;
            console.log(data);
        }
    });
}
_

グローバル変数はjavascriptファイルで使用しないでください。ただし、これは最も簡単なソリューションです。

私は自分のプロジェクトの3番目のソリューションを好みました。

10
ahmet