특정 요청에 대해 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
'program story' 카테고리의 다른 글
| Jquery로 페이지 제목 변경 (0) | 2020.10.31 |
|---|---|
| PHPMyAdmin에 대한 루트 비밀번호 생성 (0) | 2020.10.31 |
| Laravel 4 : 원시 SQL을 실행하는 방법? (0) | 2020.10.31 |
| 사용자 정의 시드 파일 추가 (0) | 2020.10.31 |
| Objective-C와 동등한 정적 생성자? (0) | 2020.10.31 |