jQuery 1.5 에서 deferred 대상 의 코드 사용(번역)
2. 이 글 은 jQuery 1.5 블 로그 에 올 라 왔 으 며,현재 deferred 가 비교적 전형 적 이 고 깊이 있 는 글 을 소개 하고 있다.현재 중국어 자료 가 비교적 적은 것 을 감안 하여 특별히 번역 하여 여러분 들 이 참고 하도록 제공 합 니 다.
3. 전편 은 의역 방식 을 채택 하 였 으 니,만약 부당 하 다 면 여러분 께 서 제기 해 주 십시오.
jQuery 1.5 에 추 가 된 Deferreds 대상 은 작업 이 완 료 된 처리 방식 을 작업 자체 와 결합 시 킬 수 있 습 니 다.이 는 자 바스 크 립 트 커 뮤 니 티 에서 새로운 것 이 없다.모 치 킷 과 Dojo 두 JS 프레임 워 크 가 이 특성 을 실현 한 지 오래 되 었 기 때문이다.그러나Julian AubourgjQuery 1.5 의 AJAX 모듈 을 재 작성 하면 서 deferreds 는 당연히 내부 의 실현 논리 가 되 었 다.deferreds 대상 을 사용 하면 여러 개의 리 셋 함 수 는 작업 이 완 료 될 때 실 행 될 수 있 고 심지어 작업 이 완 료 된 후에 이 리 셋 함 수 를 연결 할 수 있 습 니 다.이 임무 들 은 비동기 적일 수도 있 고 동기 화 될 수도 있다.
더 중요 한 것 은 deferreds 가$.ajax()의 내부 로 구현 되 었 기 때문에 AJAX 를 호출 할 때 deferreds 가 가 져 온 것 을 자동 으로 가 져 올 수 있 습 니 다.예 를 들 어 우 리 는 이렇게 리 셋 함 수 를 연결 할 수 있다.
// $.get, AJAX
var req = $.get('foo.htm').success(function (response) {
// AJAX
}).error(function () {
// AJAX
});
// AJAX
doSomethingAwesome();
// AJAX ， AJAX ，
// $.ajax deferred ，
req.success(function (response) {
// AJAX ， AJAX
});
function doAjax() {
return $.get('foo.htm');
}
function doMoreAjax() {
return $.get('bar.htm');
}
$.when(doAjax(), doMoreAjax()).then(function () {
console.log('I fire once BOTH ajax requests have completed!');
}).fail(function () {
console.log('I fire if one or more requests failed.');
});
위의 예제 가 정상적으로 실 행 될 수 있 습 니 다.이것 은 모든 jQuery 의 AJAX 방법 반환 값 에 promise 함 수 를 포함 하여 비동기 요청 을 추적 하 는 데 사 용 됩 니 다.Promise 함수 의 반환 값 은 deferred 대상 의 읽 기 전용 보기 입 니 다.(The promise is a read-only view into the result of the task.)Deferreds 는 검사 대상 에 promise()함수 가 존재 하 는 지 여 부 를 통 해 현재 대상 이 관찰 할 수 있 는 지 여 부 를 판단 합 니 다.$.when()은 모든 AJAX 요청 이 끝 날 때 까지 기 다 렸 다가.then(),.fail()을 통 해 등 록 된 리 셋 함수(어떤 리 셋 함 수 를 구체 적 으로 호출 하 느 냐 는 작업 의 종료 상태 에 달 려 있 습 니 다)를 호출 합 니 다.이 반전 함 수 는 그들의 등록 순서에 따라 실 행 될 것 이다.
더 좋 은 것 은$.when()이 함수 나 함 수 를 받 아들 이 는 배열 을 매개 변수 로 하 는 것 입 니 다.함수 배열 을 매개 변수 로 할 수 없 음 을 주의 하 십시오).그러면 비동기 작업 을 마음대로 조합 할 수 있 습 니 다.
$.ajax()는 대상 을 되 돌려 줍 니 다.이 대상 은 promise(),then(),success(),error()와 연 결 된 deferred 함수 입 니 다.그러나 원본 deferred 대상 을 조작 할 수 없습니다.promise()함수 만 있 습 니 다.
그런데 왜 deferred 대상 으로 돌아 가지 않 습 니까?만약 에 완전한 deferred 대상 을 되 돌려 준다 면 우 리 는 더 많은 통 제 를 가지 게 될 것 입 니 다.아마도 마음대로 트리거 할 수 있 을 것 입 니 다.따라서 원 하지 않 는 deferred 의 위험 을 피하 기 위해 서 는 dfd.promise()만 되 돌려 야 합 니 다.(그러므로 potentially breaking the whole paradigm,only return the dfd.promise().)나 는 그 중의 원인 등록 리 셋 함수(Registering Callbacks)위의 예 에서 우 리 는 then(),success(),fail()방법 으로 리 셋 함 수 를 등록 할 것 이다.사실은 더 많은 방법 을 사용 할 수 있다.특히 AJAX 요청 을 처리 할 때.구체 적 으로 어떤 방식 을 사용 하 느 냐 는 결과 상태 에 대한 관심 에 달 려 있다.모든 deferred 대상 에 있 는 함수(AJAX,$.when 또는 수 동 으로 만 든 deferred 대상):
.then( doneCallbacks, failedCallbacks )
.done( doneCallbacks )
.fail( failCallbacks )
// "success" "error" "done" and "fail"
.success( doneCallbacks )
.error( failCallbacks )
.complete( completeCallbacks )
$.get("/foo/").done( fn );
// ：
$.get("/foo/").success( fn );
// ：
$.get("/foo/", fn );
function getData() {
return $.get('/foo/');
}
function showDiv() {
var dfd = $.Deferred();
$('#foo').fadeIn(1000, dfd.resolve);
return dfd.promise();
}
$.when(getData(), showDiv()).then(function (ajaxResult) {
console.log('The animation AND the AJAX request are both done!');
// 'ajaxResult' （ ： getData AJAX ）
});
function showDiv() {
var dfd = $.Deferred();
$('#foo').fadeIn(1000, dfd.resolve);
return dfd.promise();
}
// ：
function showDiv() {
return $.Deferred(function (dfd) {
$('#foo').fadeIn(1000, dfd.resolve);
}).promise();
}
function getData() {
return $.get('/foo/').success(function () {
console.log('Fires after the AJAX request succeeds');
});
}
function showDiv() {
return $.Deferred(function (dfd) {
// ： ， jsFiddle 。
// ， deferred
dfd.done(function () {
console.log('Fires after the animation succeeds');
});
$('#foo').fadeIn(1000, dfd.resolve);
}).promise();
}
$.when(getData(), showDiv()).then(function (ajaxResult) {
console.log('Fires after BOTH showDiv() AND the AJAX request succeed!');
// 'ajaxResult'
});
function saveContact(row) {
var form = $.tmpl(templates["contact-form"]),
valid = true,
messages = [],
dfd = $.Deferred();
/*
*
*/
if (!valid) {
dfd.resolve({
success: false,
errors: messages
});
} else {
form.ajaxSubmit({
dataType: "json",
success: dfd.resolve,
error: dfd.reject
});
}
return dfd.promise();
};
saveContact(row).then(function (response) {
if (response.success) {
// ，
} else {
//
//
}
}).fail(function (err) {
// AJAX
});
function startTask(element) {
var timestamp = $.data(element, 'timestamp');
if (timestamp) {
return timestamp;
} else {
return $.get('/start-task/').success(function (timestamp) {
$.data(element, 'timestamp', timestamp);
});
}
}
$('#launchApplication').bind('click', function (event) {
event.preventDefault();
$.when(startTask(this)).done(function (timestamp) {
$('#status').html('<p>You first started this task on: ' + timestamp + '</p>');
});
loadApplication();
});
var obj = {
promise: function () {
// do something
}
};
$.when(obj).then(fn);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Ajax 이용시 로컬 파일이 CORS 에러가 되었을 때의 대응초보의 초보로 입문편의 참고서를 보면서 공부하고 있어, Ajax에서 로컬 파일을 호출하려고했지만 CORS 정책 오류로 인해 실패했습니다. 브라우저에서 로컬 파일(html)을 표시한 것뿐. 사용 브라우저는 chrome...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
