programing

특정 요청에 대해 ajaxStart() 및 ajaxStop()을 사용하지 않도록 설정합니다.

subpage 2023. 3. 20. 23:14
반응형

특정 요청에 대해 ajaxStart() 및 ajaxStop()을 사용하지 않도록 설정합니다.

ajax Start()와 .ajax Stop()을 사용하여 ajax 요청이 이루어지는 동안 모달(modal)을 표시합니다.(시작과 정지 사이)

이제 이 사이트의 왼쪽 상단 모서리에 있는 것과 같이 알림을 계속 기다리는 롱폴 기능을 추가하려고 합니다.

현재 문제는 롱폴링 요청에 대해서만 이 모드를 비활성화하는 것입니다.

핸들러 온/오프에 "화면 로드" 등록:

$(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 등의 글로벌이벤트를 임의의 요소에 바인드할 수 있습니다.jQuery 1.9 이후:

jQuery 1.9에서는 .ajaxStart() 메서드로 추가된 이벤트를 포함하여 jQuery 글로벌 Ajax 이벤트의 모든 핸들러를 문서에 첨부해야 합니다.

따라서 이러한 이벤트는 커스텀네임스페이스에 바인드 또는 언바인드 할 수 없습니다.

해결책 2: 속성 설정global

$.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 파일에서는 글로벌 변수를 사용하지 마십시오.하지만 이게 제가 찾을 수 있는 가장 간단한 해결책입니다.

나는 내 프로젝트에 세 번째 솔루션을 선호했다.

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

반응형