jQuery.ajaxStop() 함수에 대한 자세한 설명-JS 튜토리얼-php.cn

ajaxStop() 함수는 AJAX 요청의 ajaxStop 이벤트에 대한 핸들러 함수를 바인딩하는 데 사용됩니다.

이것은 ajaxStop 이벤트가 트리거될 때 바인딩된 이벤트 처리 함수를 실행하는 데 사용되는 전역 AJAX 이벤트 함수입니다.

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 객체(인스턴스)에 속합니다.

Syntax

이 함수는 jQuery 1.0의 새로운 기능입니다.

jQueryObject.ajaxStop(handler)

parameter

parameter Description

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 샘플 코드입니다.

참고: 이는 ajaxStop() 함수가 아닙니다. 먼저 실행되는 AJAX 요청. 먼저 끝나는 것은 전체 AJAX 요청 프로세스에서 네트워크, 데이터 양, 관련 코드 실행 시간 등과 밀접한 관련이 있습니다. 아래 샘플 코드에서는 설명의 편의를 위해 모든 AJAX 요청에 동일한 시간이 소요된다고 가정합니다.

jQuery 1.8 이전 버전을 기준으로 다음 코드를 실행해 보세요.

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 코드를 참고하겠습니다. 두 번째 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);   
    
} );

로그인 후 복사

두 번째 AJAX 요청이 전역 AJAX 이벤트를 트리거하지 않도록 비활성화되면 활성 AJAX 요청으로 간주되지 않습니다. 첫 번째 AJAX 요청은 ajaxStop 이벤트를 트리거합니다.

아아아아

위 내용은 jQuery.ajaxStop() 함수에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!