program story

특정 요청에 대해 ajaxStart () 및 ajaxStop () 비활성화

inputbox 2020. 10. 31. 09:41
반응형

특정 요청에 대해 ajaxStart () 및 ajaxStop () 비활성화


.ajaxStart () 및 .ajaxStop ()을 사용하여 ajax 요청이 이루어지는 동안 모달을 표시합니다. (시작과 중지 사이)

이제이 사이트의 왼쪽 상단에있는 것과 유사한 알림을 계속 기다리는 롱폴 기능을 추가하고 싶습니다.

내 문제는 이제 longpolling 요청에 대해서만이 모달을 비활성화하는 것입니다.

"로딩 화면"on 및 off 핸들러 등록 :

$(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()함수의 첫 번째 줄에 반환 되는 전역 변수를 도입하려고 시도했지만 로딩 화면을 완전히 죽이는 것 같습니다.

이것이 어떻게 달성 될 수 있는가?


나는 그것을 알아..

옵션 개체에 .ajax()라는 속성이 있습니다 global.

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
});

가능한 모든 해결책을 읽은 후 답변을 결합하고 싶습니다.

해결 방법 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);
                }
       });

This solution works to disable ajaxStart()/ajaxStop() event(s). However, it also makes disable ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess(). If you don't use these global events, it seems ok, but when it is needed, you have to come back and change your solution for all pages where you set global: false.

Solution 3: Use global variable

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);
        }
    });
}

Global variables should not be used in javascript files. However, this is the simplest solution, I can find.

I prefered the third solution for my project.

참고URL : https://stackoverflow.com/questions/12604722/disable-ajaxstart-and-ajaxstop-for-a-specific-request

반응형