jQuery.ajaxStop()関数の詳しい説明-jsチュートリアル-php.cn

jQuery.ajaxStop()関数の詳しい説明

巴扎黑

リリース： 2017-07-03 11:01:37

オリジナル

1643 人が閲覧しました

ajaxStop() 関数は、AJAX リクエストの ajaxStop イベントのハンドラー関数をバインドするために使用されます。

これはグローバル AJAX イベント関数であり、ajaxStop イベントがトリガーされたときにバインドされたイベント処理関数を実行するために使用されます。

jQuery 公式ドキュメントの説明: AJAX リクエストが完了するたびに (成功または失敗にかかわらず)、jQuery は他のアクティブな (未完了の) AJAX リクエストがあるかどうかを確認します。プロセス内で他のアクティブな AJAX リクエストが見つからない場合、jQuery は ajaxStop イベントをトリガーします。この時点で、ajaxStop() 関数を通じてバインドされたすべてのイベント処理関数が実行されます。

つまり、AJAX リクエストが終了し、現時点で他にアクティブな AJAX リクエストがない場合、そのリクエストは ajaxStop イベントをトリガーします。

一般的に、複数の AJAX リクエストが連続して実行される場合、最後に完了した AJAX リクエストのみが ajaxStop イベントをトリガーします。すべての AJAX リクエストが実行された後、複数の AJAX リクエストが連続して実行されるか、最後に完了した AJAX リクエストのみが ajaxStop イベントをトリガーします。

AJAX リクエストがグローバル AJAX イベントをトリガーすることが禁止されている場合、そのリクエストはアクティブな AJAX リクエストとみなされません。

この関数は jQuery オブジェクトインスタンスで呼び出す必要があります。ajaxStop() はイベントハンドラー関数を一致する各要素にバインドします。 ajaxStop イベントがトリガーされると、一致するすべての要素にバインドされたハンドラー関数が呼び出されます。イベントハンドラー内のこれは、現在の DOM 要素を指します。

同じ要素に対してこの関数を複数回呼び出して、複数のイベントハンドラーをバインドできます。イベントがトリガーされると、jQuery はバインドされたイベント処理関数をバインドの順序で実行します。

jQuery 1.8 以降、この関数はイベントハンドラーを document オブジェクトにのみバインドでき、他の要素にバインドされたイベントハンドラーは機能しません。

jQuery.ajax() または jQuery.ajaxSetup() でオプションパラメーター global を false に設定すると、AJAX リクエストがグローバル AJAX イベントをトリガーするのを防ぐことができます。

この関数はjQueryオブジェクト(インスタンス)に属します。

構文

この関数は jQuery 1.0 の新しい関数です。

jQueryObject.ajaxStop(handler)

parameter

parameter 説明

handler 関数の種類このイベントがトリガーされたときに実行する必要があるイベントハンドラー関数。

戻り値

ajaxStop()関数の戻り値はjQuery型であり、現在のjQueryオブジェクトそのものを返します。

例と説明

ajaxStop イベントと ajaxStop イベントのトリガーメカニズムについては、jQuery の jQuery.ajax() 関数のソースコードの一部を参照できます。

次のソースコードを通じて、jQuery が現在アクティブな AJAX リクエストの数をカウントすることがわかります。 AJAX リクエストが開始されるたびに、アクティブな数は 1 ずつ増加し、AJAX リクエストが完了するたびに、アクティブな数は 1 ずつ減ります。 AJAX リクエストの開始時にアクティブな番号が 0 の場合は、ajaxStart イベントがトリガーされます。AJAX リクエストの終了時にアクティブな番号が 0 の場合は、ajaxStop イベントがトリガーされます。

// jQuery.ajax()函数的开头部分
var fireGlobals = s.global; // 是否允许触发全局AJAX事件
// 如果允许触发全局AJAX事件，并且活跃的AJAX请求数为0，则触发ajaxStart事件
if ( fireGlobals && jQuery.active++ === 0 ) {
    jQuery.event.trigger("ajaxStart");
}
// ... 省略中间的源代码
// jQuery.ajax()函数的末尾部分
if ( fireGlobals ) {
    globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
    // 如果允许触发全局事件，并且活跃的AJAX请求数为0，则触发ajaxStop事件
    if ( !( --jQuery.active ) ) {
        jQuery.event.trigger("ajaxStop");
    }
}

ログイン後にコピー

次の HTML サンプルコードを参照してください:

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>
<input id="btn" type="button" value="开始AJAX请求" />

ログイン後にコピー

以下は、ajaxStop() 関数の具体的な使用法を示す、ajaxStop() 関数に関連する jQuery サンプルコードです:

注意:最初に実行される AJAX リクエスト。これは、AJAX リクエストプロセス全体のネットワーク、データ量、関連コードの実行時間などに密接に関係します。以下のサンプルコードでは、説明を簡単にするために、すべての AJAX リクエストに同じ時間がかかると想定しています。

1.8 より前の jQuery バージョンに基づいて次のコードを実行してください。

var $divs = $("div");
$divs.ajaxStop( function(){
    alert("处理函数1：当前元素id为" + this.id );
} );
$divs.ajaxStop( function(){
    alert("处理函数2：当前元素id为" + this.id );
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时，下一个AJAX请求正在执行，因此不会触发ajaxStop事件，也不会弹出对话框   
    $.ajax( { url: "index.html" } );    
    
    // 该AJAX请求结束时，上一个AJAX请求已经执行完毕，因此会触发ajaxStop事件
    // 它会弹出6次对话框 ，因为当前页面有3个div元素，我们为每个div元素绑定了2个事件处理函数
    $.ajax( { url: "myurl.php" } );
    
} );

ログイン後にコピー

現在の jQuery がバージョン 1.8 以降の場合、上記の jQuery コードはダイアログボックスにポップアップ表示されません。 jQuery 1.8 以降では、ajaxStop イベントのハンドラー関数を有効にするにはドキュメントオブジェクトにバインドする必要があるためです。

したがって、現在の jQuery のバージョンに関係なく、特別な必要がない場合は、ajaxStop イベントハンドラーをドキュメントオブジェクトにバインドする必要があります。

var $divs = $("div");
$divs.ajaxStop( function(){
    alert("处理函数1");
} );
$divs.ajaxStop( function(){
    alert("处理函数2");
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时，下一个AJAX请求正在执行，因此不会触发ajaxStop事件，也不会弹出对话框   
    $.ajax( { url: "index.html" } );    
    
    // 该AJAX请求结束时，上一个AJAX请求已经执行完毕，因此会触发ajaxStop事件
    // 它会弹出2次对话框 ，因为我们为document绑定了2个事件处理函数
    $.ajax( { url: "myurl.php" } );
    
} );

ログイン後にコピー

さて、次の jQuery コードを参照します。 2 番目の AJAX リクエストの実行を 3 秒 (または最初の AJAX リクエストを確実に完了できる他の時間値) 遅延させます。この時点で、両方の AJAX リクエストがダイアログボックスに表示されます。

var $doc = $( document );
$doc.ajaxStop( function(){
    alert("处理函数1" );
} );
$doc.ajaxStop( function(){
    alert("处理函数2" );
} );
// 点击执行AJAX请求
$("#btn").click( function(){
    // 该AJAX请求结束时，此时没有其他活跃的AJAX请求(下一个请求尚未执行)，因此会触发ajaxStop事件
    // 它会弹出2次对话框
    $.ajax( { url: "index.html" } );
    // 延迟3秒执行第二个AJAX请求
    setTimeout( function(){
        
        // 该AJAX请求结束时，此时没有其他活跃的AJAX请求(上一个请求早已经执行完毕)
        // 因此会触发ajaxStop事件，会弹出2次对话框
        $.ajax( { url: "myurl.php" } );
        
    }, 3000);   
    
} );

ログイン後にコピー

2 番目の AJAX リクエストがグローバル AJAX イベントのトリガーから無効にされている場合、そのリクエストはアクティブな AJAX リクエストとみなされません。最初の AJAX リクエストは ajaxStop イベントをトリガーします。

りー

以上がjQuery.ajaxStop()関数の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。