jquery 기본 튜토리얼: 지연된 객체를 사용하는 방법_jquery

1. 지연 객체란 무엇인가요?

웹사이트를 개발하는 과정에서 우리는 종종 시간이 오래 걸리는 특정 JavaScript 작업을 접하게 됩니다. 그 중에는 비동기 작업(예: ajax 서버 데이터 읽기)과 동기 작업(예: 대규모 배열 순회)이 모두 있으며 결과를 즉시 사용할 수는 없습니다.

일반적인 접근 방식은 콜백 함수를 지정하는 것입니다. 즉, 실행이 완료된 후 어떤 함수를 호출해야 하는지 미리 지정하세요.

그러나 jQuery는 콜백 함수에 있어서 매우 취약합니다. 이를 바꾸기 위해 jQuery 개발팀은 지연 객체를 설계했습니다.

간단히 말하면 지연 객체는 jQuery의 콜백 함수 솔루션입니다. 영어로 defer는 "지연"을 의미하므로 deferred 객체의 의미는 미래의 특정 시점까지 실행을 "지연"하는 것입니다.

시간이 많이 걸리는 작업을 처리하는 방법에 대한 문제를 해결하고 해당 작업에 대한 더 나은 제어 기능과 통합 프로그래밍 인터페이스를 제공합니다. 주요 기능은 네 가지로 요약할 수 있다. 아래에서는 샘플 코드를 통해 단계별로 학습하겠습니다.

2. Ajax 연산의 체인 작성 방법

먼저 jQuery의 ajax 작업을 작성하는 전통적인 방법을 검토해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

$.ajax({
url : "test .html",
success: function(){
alert("하하, 성공했습니다!");

},
error:function(){
alert("오류가 발생했습니다!");
}

});

위 코드에서 $.ajax()는 개체 매개변수를 허용합니다. 이 개체에는 두 가지 메서드가 포함되어 있습니다. 성공 메서드는 작업이 성공한 후 콜백 함수를 지정하고, 오류 메서드는 작업이 실패한 후 콜백 함수를 지정합니다.

$.ajax() 작업이 완료된 후 jQuery 1.5.0 미만 버전을 사용하는 경우 XHR 객체가 반환되고 버전이 1.5.0보다 높으면 체인 작업을 수행할 수 없습니다. , 반환된 Deferred 객체를 연결할 수 있습니다.

이제 새로운 작성 방식은 이렇습니다.

코드 복사 코드는 다음과 같습니다.

$.ajax("test.html")

.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

보시다시피 done()은 성공 메소드에 해당하고, 실패()는 오류 메소드에 해당합니다. 체인 라이팅 방식을 채택한 후 코드의 가독성이 크게 향상되었습니다.

3. 동일한 작업에 여러 콜백 함수 지정

지연 객체의 가장 큰 장점 중 하나는 여러 콜백 함수를 자유롭게 추가할 수 있다는 것입니다.

위 코드를 예로 들면, ajax 작업이 성공한 후 원래 콜백 함수 외에 다른 콜백 함수도 실행하고 싶은 경우 어떻게 해야 하나요?

매우 간단합니다. 마지막에 추가하면 됩니다.

코드 복사 코드는 다음과 같습니다.

$.ajax("test.html" )
.done(function(){ Alert("하하, 성공했습니다!");} )
.fail(function(){ Alert("오류가 발생했습니다!"); } )
.done (function( ){ Alert("두 번째 콜백 함수!");} );

콜백 함수를 원하는 만큼 추가할 수 있으며, 순서대로 실행됩니다. 추가됩니다.

4. 여러 작업에 대한 콜백 함수 지정

지연 객체의 또 다른 큰 이점은 여러 이벤트에 대한 콜백 함수를 지정할 수 있다는 것인데, 이는 기존 작성에서는 불가능합니다.

새로운 메소드 $.when()을 사용하는 다음 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

$.when($.ajax(" test1.html "), $.ajax("test2.html"))
.done(function(){ Alert("하하, 성공했습니다!"); })
.fail(function(){ 경고 (" 문제가 발생했습니다! "); });

이 코드의 의미는 먼저 $.ajax("test1.html") 및 $.ajax( "test2 .html"), 모두 성공하면 done()으로 지정된 콜백 함수가 실행됩니다. 하나가 실패하거나 둘 다 실패하면 실패()로 지정된 콜백 함수가 실행됩니다.

5. 일반 작업을 위한 콜백 함수 인터페이스(1부)

지연 객체의 가장 큰 장점은 이 콜백 함수 인터페이스 세트를 ajax 작업에서 모든 작업으로 확장한다는 것입니다. 즉, 모든 작업(Ajax 작업이든 로컬 작업이든, 비동기 작업이든 동기 작업이든)은 지연된 개체의 다양한 메서드를 사용하여 콜백 함수를 지정할 수 있습니다.

구체적인 예를 살펴보겠습니다. 시간이 많이 걸리는 작업 대기가 있다고 가정해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

var wait = function(){

var 작업 = function(){

alert("실행이 완료되었습니다!");

};

setTimeout(tasks,5000);

};

콜백 함수를 지정하려면 어떻게 해야 할까요?

당연히 $.when()을 사용할 수 있다고 생각할 것입니다.

코드 복사 코드는 다음과 같습니다.

$.when(wait())

.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

단, 이렇게 작성하면 done() 메소드가 바로 실행되어 콜백 함수로 동작하지 않게 됩니다. 그 이유는 $.when()의 매개변수는 지연된 객체만 가능하므로 wait()를 다시 작성해야 하기 때문입니다.

코드 복사 코드는 다음과 같습니다.

var dtd = $.Deferred() // 새로운 지연 객체 생성

var 대기 = 함수(dtd){

var 작업 = function(){

alert("실행이 완료되었습니다!");

dtd.resolve(); // 지연된 객체의 실행 상태 변경

};

setTimeout(tasks,5000);

반환 dtd;

};

이제 wait() 함수는 지연된 객체를 반환하므로 체인 작업을 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$.when(wait(dtd))

.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

wait() 함수가 실행되면 done() 메서드에 지정된 콜백 함수가 자동으로 실행됩니다.

6. deferred.resolve() 메서드와 deferred.reject() 메서드

자세히 살펴보면 위의 wait() 함수에 제가 설명하지 않은 또 다른 부분이 있다는 것을 알 수 있습니다. 그게 dtd.resolve()가 하는 일인가요?

이 문제를 명확히 하려면 '실행 상태'라는 새로운 개념을 도입해야 합니다. jQuery는 지연된 객체에 미완성, 완료, 실패의 세 가지 실행 상태가 있다고 규정합니다. 실행 상태가 "완료"(해결됨)인 경우 지연된 객체는 done() 메서드에서 지정한 콜백 함수를 즉시 호출합니다. 실행 상태가 "실패"인 경우에는 실패() 메서드에서 지정한 콜백 함수가 호출됩니다. 실행 상태가 "실패" 완료"인 경우 계속 기다리거나 Progress() 메서드(jQuery 1.7 버전에 추가됨)에 지정된 콜백 함수를 호출합니다.

이전 부분의 ajax 작업 중에 지연된 개체는 반환 결과에 따라 실행 상태를 자동으로 변경하지만 wait() 함수에서는 이 실행 상태를 프로그래머가 수동으로 지정해야 합니다. dtd.resolve()의 의미는 dtd 객체의 실행 상태를 "미완성"에서 "완료"로 변경하여 done() 메서드를 트리거하는 것입니다.

마찬가지로 dtd 객체의 실행 상태를 "불완전"에서 "실패"로 변경하여 실패() 메서드를 트리거하는 deferred.reject() 메서드도 있습니다.

코드 복사 코드는 다음과 같습니다.

var dtd = $.Deferred(); // 새로운 지연된 객체

var 대기 = 함수(dtd){

var 작업 = function(){

alert("실행이 완료되었습니다!");

dtd.reject(); // Deferred 객체의 실행 상태를 변경합니다

};

setTimeout(tasks,5000);

반환 dtd;

};

$.when(기다려(dtd))

.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

7. deferred.promise() 메소드

위의 작성 방식에는 여전히 문제가 있습니다. 즉, dtd는 전역 객체이므로 외부에서 실행 상태를 변경할 수 있다.

아래 코드를 보세요.

코드를 복사하세요 코드는 다음과 같습니다.

var dtd = $.Deferred(); // 새로운 Deferred 객체 생성

var 대기 = 함수(dtd){

var 작업 = function(){

alert("실행이 완료되었습니다!");

dtd.resolve(); // Deferred 객체의 실행 상태 변경

};

setTimeout(tasks,5000);

반환 dtd;

};

$.when(기다려(dtd))

.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

dtd.resolve();

코드 끝에 dtd.resolve() 줄을 추가했는데, dtd 객체의 실행 상태가 변경되어 done() 메서드가 즉시 실행되고 "하하, 성공!" 프롬프트 상자가 나타납니다. 5 몇 초 후에 "실행 완료!" 프롬프트 상자가 나타납니다.

이러한 상황을 방지하기 위해 jQuery는 deferred.promise() 메서드를 제공합니다. 그 기능은 원래 지연된 객체에 다른 지연된 객체를 반환하는 것입니다. 후자는 실행 상태 변경과 관련이 없는 메서드(예: done() 메서드 및 실패() 메서드)만 열고 실행 상태 변경과 관련된 메서드를 차단합니다. 실행 상태(resolve() 메서드, 거부() 메서드 등)를 실행하므로 실행 상태를 변경할 수 없습니다.

아래 코드를 보세요.

코드를 복사하세요 코드는 다음과 같습니다.

var dtd = $.Deferred(); // 새로운 Deferred 객체 생성

var 대기 = 함수(dtd){

var 작업 = function(){

alert("실행이 완료되었습니다!");

dtd.resolve(); // Deferred 객체의 실행 상태 변경

};

setTimeout(tasks,5000);

return dtd.promise(); // 프로미스 객체 반환

};

var d = wait(dtd); // 새로운 d 객체를 생성하고 대신 이 객체에 대해 연산을 수행합니다

$.when(d)

.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

d.resolve(); // 현재 이 구문은 유효하지 않습니다.

위 코드에서 wait() 함수는 Promise 객체를 반환합니다. 그런 다음 원래 지연된 객체 대신 이 객체에 콜백 함수를 바인딩합니다. 이것의 장점은 이 객체의 실행 상태를 변경할 수 없다는 것입니다. 실행 상태를 변경하려는 경우 원래 지연된 객체만 조작할 수 있습니다.

그러나 이를 작성하는 더 좋은 방법은 allenm이 지적한 대로 dtd 객체를 wait() 함수의 내부 객체로 바꾸는 것입니다.

코드 복사 코드는 다음과 같습니다.

var wait = function(dtd){

var dtd = $.Deferred(); //함수 내에서 새로운 Deferred 객체를 생성합니다

var 작업 = function(){

alert("실행이 완료되었습니다!");

dtd.resolve(); // Deferred 객체의 실행 상태 변경

};

setTimeout(tasks,5000);

return dtd.promise(); // 프로미스 객체 반환

};

$.when(wait())

.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ Alert("Error!"); });

8. 일반 작업을 위한 콜백 함수 인터페이스(가운데)

실행 상태가 외부에서 변경되는 것을 방지하는 또 다른 방법은 지연된 객체의 생성자 함수 $.Deferred()를 사용하는 것입니다.

이때 대기 함수는 변경되지 않고 $.Deferred()에 직접 전달합니다.

코드 복사 코드는 다음과 같습니다.

$.Deferred(wait)

.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

jQuery에서는 $.Deferred()가 함수 이름(함수 이름임)을 매개변수로 받아들일 수 있고 $.Deferred()에 의해 생성된 지연된 객체가 이 함수의 기본 매개변수로 사용된다고 규정합니다. .

9. 일반 작업을 위한 콜백 함수 인터페이스(2부)

위의 두 가지 방법 외에도 지연된 인터페이스를 대기 개체에 직접 배포할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

var dtd = $.Deferred(); // 지연된 객체 생성

var 대기 = 함수(dtd){

var 작업 = function(){

alert("실행이 완료되었습니다!");

dtd.resolve(); // Deferred 객체의 실행 상태 변경

};

setTimeout(tasks,5000);

};

dtd.promise(대기);

wait.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

기다려(dtd);

여기서 핵심은 대기 개체에 Deferred 인터페이스를 배포하는 데 사용되는 dtd.promise(wait) 줄입니다. done()과 failure()가 나중에 wait에서 직접 호출될 수 있는 것은 바로 이 줄 때문입니다.

10. 요약: 지연된 객체의 방법

우리는 이미 지연된 객체의 다양한 방법에 대해 이야기했습니다. 요약은 다음과 같습니다.

(1) $.Deferred()는 지연된 객체를 생성합니다.

(2) deferred.done()은 작업 성공 시 콜백 함수를 지정합니다

(3) deferred.fail()은 작업 실패 시 콜백 함수를 지정합니다

(4) deferred.promise()에 매개변수가 없으면 새 지연된 객체를 반환하고 매개변수를 허용할 때 객체의 실행 상태를 변경할 수 없으며 매개변수 객체에 지연된 인터페이스를 배포하는 역할을 합니다. .

(5) deferred.resolve() 지연된 객체의 실행 상태를 수동으로 "완료"로 변경하여 done() 메서드를 즉시 트리거합니다.

(6) deferred.reject() 이 메서드는 deferred.resolve()와 정확히 반대입니다. 호출된 후 지연된 개체의 실행 상태가 "실패"로 변경되어 실패() 메서드가 트리거됩니다. 즉시.

(7) $.when()은 여러 작업에 대한 콜백 함수를 지정합니다.

이러한 메서드 외에도 지연된 개체에는 위 튜토리얼에서 다루지 않은 두 가지 중요한 메서드가 있습니다.

(8)deferred.then()

때로는 문제를 해결하기 위해 done()과 failure()를 함께 작성할 수 있습니다. 이것이 then() 메서드입니다.

$.when($.ajax( "/main.php" ))

.then(successFunc, failureFunc );

then()에 두 개의 매개변수가 있는 경우 첫 번째 매개변수는 done() 메서드의 콜백 함수이고, 두 번째 매개변수는 실패() 메서드의 콜백 메서드입니다. then()에 매개변수가 하나만 있으면 done()과 동일합니다.

(9)deferred.always()

이 메소드는 콜백 함수를 지정하는 데에도 사용됩니다. deferred.resolve() 또는 deferred.reject()가 호출되더라도 결국에는 항상 실행된다는 것입니다.

코드 복사 코드는 다음과 같습니다.

$.ajax( "test.html" )

.always( function() { Alert("실행됨!");} );