jQuery Deferred 및 Promise_jquery를 사용하여 반응형 애플리케이션을 만드는 방법에 대한 자세한 소개

이 기사에서는 JavaScript의 Deferred 및 Promise 개념을 살펴봅니다. 이는 JavaScript 툴킷(예: Dojo 및 MochiKit)에서 매우 중요한 기능이며 최근 인기 있는 JavaScript 라이브러리인 jQuery(이미 버전 1.5에 있음)에서 첫선을 보였습니다. . Deferred는 미래의 특정 시점에 응답을 반환하는 것이 목적인 "promise" 개체를 생성하여 추상적인 비차단 솔루션(예: Ajax 요청에 대한 응답)을 제공합니다. 이전에 "약속"을 접하지 못했다면 아래에서 더 자세히 다룰 것입니다.

추상적으로 말하면 지연은 완료하는 데 오랜 시간이 걸리는 작업을 나타내는 방법으로 이해할 수 있습니다. 차단 기능과 비교하면 완료될 때까지 애플리케이션을 차단하는 것이 아니라 비동기식입니다. 그런 다음 결과를 반환합니다. 지연된 객체는 즉시 반환되며 콜백 함수를 지연된 객체에 바인딩할 수 있으며 비동기 처리가 완료된 후에 호출됩니다.

Promise
Promise 및 Deferred 구현 세부 사항에 대한 정보를 읽어보셨을 것입니다. 이 장에서는 지연을 지원하는 거의 모든 JavaScript 프레임워크에 적용할 수 있는 Promise 작동 방식을 간략하게 소개합니다.

일반적으로 Promise는 소프트웨어 엔지니어링에서 지연(또는 미래) 개념을 설명하기 위한 솔루션을 제공하는 모델 역할을 합니다. 그 뒤에 있는 아이디어는 이미 소개되었습니다. 메서드를 실행한 다음 결과가 반환될 때까지 애플리케이션을 차단하는 대신 약속 개체가 미래 값을 충족하도록 반환됩니다.

제3자 API의 데이터에 크게 의존하는 웹 애플리케이션을 구축한다고 가정하면 이해하는 데 도움이 될 것입니다. 그러면 우리는 API 응답의 지연 시간을 알 수 없고 결과를 반환할 때까지 애플리케이션의 다른 부분이 차단될 수 있다는 일반적인 문제에 직면하게 됩니다. Deferred는 비차단 기능을 갖추고 코드에서 완전히 분리되어 이 문제에 대한 더 나은 솔루션을 제공합니다.

Promise/A Proposal은 콜백을 등록하기 위한 'then' 메소드를 정의합니다. 이 메소드는 핸들러 함수가 결과를 반환할 때 실행됩니다. Promise를 반환하는 의사 코드는 다음과 같습니다.

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

promise = callToAPI( arg1, arg2, ...);
promise.then(function( futureValue ) {
/* futureValue 처리 */
promise.then (function( futureValue ) {
/* 다른 작업 수행 */
})

또한 Promise 콜백은 다음 두 가지 상태에서 실행됩니다.

•해결됨: 이 경우 데이터를 사용할 수 있습니다
•거부됨: 이 경우 오류가 발생했으며 사용할 수 있는 값이 없습니다
다행히 'then' 메소드는 두 개의 매개변수를 허용합니다. Promise가 해결(Resolved)되는 경우와 Promise가 거부되는(Rejected) 경우입니다. 다시 의사 코드로 돌아가 보겠습니다.

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

promise.then( function( futureValue ) {
/* 값을 얻었습니다 */
} , function() {
/* 문제가 발생했습니다 */
} ); >


어떤 경우에는 애플리케이션을 계속하기 전에 여러 결과를 반환해야 합니다(예: 사용자가 관심 있는 옵션을 선택하기 전에 동적 옵션 집합을 표시). 이 경우 'when' 메서드를 사용하면 모든 Promise가 만족된 후에만 실행을 계속할 수 있는 시나리오를 해결할 수 있습니다.

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

when(

promise1 ,
promise2,
...
).then(function( futureValue1, futureValue2, ... ) {
/* 모든 프라미스가 완료되고 해결되었습니다 */
});



좋은 예는 여러 애니메이션이 동시에 실행되는 시나리오입니다. 각 애니메이션 실행 후 콜백을 추적하지 않으면 애니메이션이 완료된 후 다음 작업을 수행하기 어렵습니다. 그러나 약속과 '언제' 메서드를 사용하는 것은 매우 간단할 수 있습니다. 애니메이션이 완료되면 다음 작업을 수행할 수 있습니다. 최종 결과는 콜백을 사용하여 여러 애니메이션 실행 결과를 기다리는 문제를 간단하게 해결할 수 있다는 것입니다. 예:

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

when( function (){

/* 애니메이션 1 */
/* 약속 반환 1 */
}, function(){
/* 애니메이션 2 */
/* 반환 약속 2 */
} ).then(function(){
/* 두 애니메이션이 모두 완료되면 추가 로직을 실행할 수 있습니다 */
})



这意味着，基本上可以用非阻塞的逻辑方式编写代码并异步执行。 而不是直接将回调传递给函数，这可能会导致紧耦合的接口，通过promise模式可以很容易区分同步和异步的概念。

　　在下一节中，我们将着眼于jQuery实现的deferreds，你可能会发现它明显比现在所看到的promise模式要简单。

jQuery的Deferreds
　　jQuery在1.5版本中首次引入了deferreds。它 所实现的方法与我们之前描述的抽象的概念没有大的差别。原则上，你获得了在未来某个时候得到‘延时'返回值的能力。在此之前是无法单独使用的。 Deferreds 作为对ajax模块较大重写的一部分添加进来，它遵循了CommonJS的promise/ A设计。1.5和先前的版本包含deferred功能，可以使$.ajax() 接收调用完成及请求出错的回调，但却存在严重的耦合。开发人员通常会使用其他库或工具包来处理延迟任务。新版本的jQuery提供了一些增强的方式来管理 回调，提供更加灵活的方式建立回调，而不用关心原始的回调是否已经触发。 同时值得注意的是，jQuery的递延对象支持多个回调绑定多个任务，任务本身可以既可以是同步也可以是异步的。

　　您可以浏览下表中的递延功能，有助于了解哪些功能是你需要的：

jQuery.Deferred（）	创建一个新的Deferred对象的构造函数，可以带一个可选的函数参数，它会在构造完成后被调用。
jQuery.when（）	通过该方式来执行基于一个或多个表示异步任务的对象上的回调函数
jQuery.ajax（）	执行异步Ajax请求，返回实现了promise接口的jqXHR对象
deferred.then（resolveCallback，rejectCallback）	添加处理程序被调用时，递延对象得到解决或者拒绝的回调。
deferred.done（）	当延迟成功时调用一个函数或者数组函数.
deferred.fail（）	当延迟失败时调用一个函数或者数组函数.。
deferred.resolve（ARG1，ARG2，...）	调用Deferred对象注册的‘done'回调函数并传递参数
deferred.resolveWith（context，args）	调用Deferred对象注册的‘done'回调函数并传递参数和设置回调上下文
deferred.isResolved	确定一个Deferred对象是否已经解决。
deferred.reject（arg1，arg2，...）	调用Deferred对象注册的‘fail'回调函数并传递参数
deferred.rejectWith（context，args）	调用Deferred对象注册的‘fail'回调函数并传递参数和设置回调上下文
deferred.promise（）	返回promise对象，这是一个伪造的deferred对象：它基于deferred并且不能改变状态所以可以被安全的传递

jQuery 지연 구현의 핵심은 체인에서 호출할 수 있는 생성자인 jQuery.Deferred입니다. ... 지연된 객체의 기본 상태는 해결되지 않으며 콜백은 .then() 또는 .fail() 메서드를 통해 대기열에 추가되고 나중에 프로세스에서 실행됩니다.

여러 매개변수를 허용하는 $.when()의 다음 예

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

function SuccessFunc(){ console.log( “성공!” ) }
function failureFunc(){ console.log( “failure!” )

$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( "/lists.php" )
) .then( SuccessFunc, failureFunc );

$.when() 구현에서 흥미로운 점은 지연된 객체를 구문 분석할 수 있을 뿐만 아니라 그렇지 않은 매개변수도 전달할 수 있다는 것입니다. 지연된 객체는 처리 시 지연된 객체로 처리되며 콜백(doneCallbacks)이 즉시 실행됩니다. 이는 jQuery의 Deferred 구현에서도 언급할 가치가 있습니다. 게다가 deferred.then()은 deferred의 대기열에 콜백을 추가하기 위한 deferred.done 및 deferred.fail() 메서드에 대한 지원도 제공합니다.

앞서 소개한 표에서 언급한 deferred 함수를 이용하여 코드 예시를 살펴보겠습니다. 여기서는 매우 기본적인 애플리케이션을 만듭니다. (1) $.get 메서드(약속 반환)를 통해 외부 뉴스 소스를 가져오고 (2) 최신 응답을 가져옵니다. 동시에 프로그램은 함수(prepareInterface())를 통해 뉴스 및 답글 내용 표시 컨테이너의 애니메이션도 구현합니다.

다른 관련 작업을 실행하기 전에 위의 세 단계가 완료되었는지 확인하기 위해 $.when()을 사용합니다. .then() 및 .fail() 핸들러는 필요에 따라 다른 프로그램 논리를 수행하는 데 사용될 수 있습니다.

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

function getLatestNews() {
return $.get( “latestNews.php”, function(data){
console.log( “뉴스 데이터 수신됨” );
$( “.news” ).html(data);
} ) ;
}
function getLatestReactions() {
return $.get( “latestReactions.php”, function(data){
console.log( “수신된 반응 데이터” );
$ ( ".reactions" ).html(data);
} );
}

function prepareInterface() {
return $.Deferred(function( dfd ) {
var late = $( “.news, .reactions” );
latest.slideDown( 500, dfd.resolve )
latest.addClass(
}).promise( );
}

$.when(
getLatestNews(), getLatestReactions(), prepareInterface()
).then(function(){
console.log( “fire 요청 성공 후 ” );
}).fail(function(){
console.log( “뭔가 잘못되었습니다!” );
})

뒤로 연기됨 작업에 ajax를 사용한다고 해서 다른 곳에서 사용할 수 없다는 의미는 아닙니다. 이 섹션에서는 지연을 사용하여 비동기 동작을 추상화하고 코드를 분리하는 데 도움이 되는 몇 가지 솔루션을 살펴보겠습니다.

비동기 캐싱
비동기 작업의 경우 동일한 키에 대해 작업이 한 번만 실행되도록 해야 하기 때문에 캐싱이 다소 까다로울 수 있습니다. 따라서 코드는 어떻게든 인바운드 작업을 추적해야 합니다. 예를 들어 다음 코드 조각은 다음과 같습니다.

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

$.cachedGetScript ( url, callback1 );
$.cachedGetScript( url, callback2 )

캐싱 메커니즘은 스크립트를 한 번만 요청할 수 있도록 해야 합니다. , 캐시에 이미 존재하는지 여부에 관계없이. 따라서 캐싱 시스템이 요청을 올바르게 처리하려면 궁극적으로 특정 URL에 바인딩된 콜백을 추적하는 로직을 작성해야 합니다.

다행히도 이것이 바로 일종의 논리 지연 구현이므로 다음과 같이 할 수 있습니다.

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

var cashedScriptPromises = {};
$.cachedGetScript = function( url, callback ) {
if ( !cachedScriptPromises[ url ] ) {
cachedScriptPromises[ url ] = $.Deferred(function( defer ) {
$.getScript( url ).then( defer.resolve, defer.reject );
}).promise();
}
return cashedScriptPromises[ url ].done( callback )



코드는 매우 간단합니다. 각 URL에 대한 Promise 개체를 캐시합니다. 주어진 URL에 Promise가 없으면 deferred를 생성하고 요청합니다. 이미 존재하는 경우 콜백을 바인딩하면 됩니다. 이 솔루션의 가장 큰 장점은 새 요청과 캐시된 요청을 투명하게 처리한다는 것입니다. 또 다른 장점은 지연 기반 캐시가 오류 상황을 적절하게 처리한다는 것입니다. Promise가 '거부됨' 상태로 끝나면 테스트를 위해 오류 콜백을 제공할 수 있습니다:

　 $.cachedGetScript( url ).then( SuccessCallback, errorCallback )

기억하세요: 아니요 문제 요청이 캐시되었는지 여부에 관계없이 위 코드 조각은 정상적으로 작동합니다!

범용 비동기 캐시
코드를 최대한 일반적으로 만들기 위해 캐시 팩토리를 구축하고 실제로 수행해야 하는 작업을 추상화합니다.

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

$.createCache = function( requestFunction ) {
var 캐시 = {} ;
return function( key, callback ) {
if ( !cache[ key ] ) {
cache[ key ] = $.Deferred(function( defer ) {
requestFunction( defer, key ) ;
}).promise();
}
return 캐시[ key ].done( callback )
}; >

이제 특정 요청 논리가 추상화되었으므로 캐시된GetScript를 다시 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다. $.cachedGetScript = $.createCache(function( defer, url ) {

$.getScript( url ).then( defer.resolve, defer.reject );

});



createCache를 호출할 때마다 새 캐시 라이브러리가 생성되고 새 캐시 검색 함수가 반환됩니다. 이제 캐시에서 값을 가져오는 것과 관련된 논리적 시나리오를 쉽게 구현할 수 있는 일반 캐시 팩토리가 생겼습니다.

이미지 로드

또 다른 후보 시나리오는 이미지 로드입니다. 동일한 이미지를 두 번 로드하지 않도록 주의하세요. 이미지를 로드해야 할 수도 있습니다. createCache를 사용하면 쉽게 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다. $ .loadImage = $.createCache(function( defer, url ) {

var image = new Image();

function cleanUp() {
image.onload = image.onerror = null;
}
defer.then( cleanUp, cleanUp );
image.onload = function() {
defer.resolve( url )
image.onerror =
image.src = url
});



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

코드 복사

코드는 다음과 같습니다. $.loadImage( "my-image.png" ).done( callback1 ); .loadImage( "my-image.png" " ).done( callback2 );

image.png가 로드되었는지 또는 로드 중인지 여부에 관계없이 캐싱이 정상적으로 작동합니다. 짐을 실은.


API 응답용 캐시 데이터

페이지 수명 주기 동안 변경할 수 없는 것으로 간주되는 API 요청도 캐싱을 위한 완벽한 후보입니다. 예를 들어 다음 작업을 수행합니다.


코드 복사

코드는 다음과 같습니다. $.searchTwitter = $.createCache(function( defer, query ) { $.ajax({ url: "http://search.twitter.com/search.json",

data: { q: 쿼리 },

dataType: "jsonp",
성공: defer.resolve,
error: defer.reject
})



프로그램 캐싱하는 동안 Twitter에서 검색을 수행할 수 있습니다.

코드 복사

코드는 다음과 같습니다. $.searchTwitter( "jQuery Deferred", callback1 ) $.searchTwitter( "jQuery Deferred", callback2 );
타이밍
지연 기반 캐싱은 네트워크 요청에만 국한되지 않고 타이밍 목적으로도 사용될 수 있습니다.

예를 들어 쉽게 눈에 띄지 않는 특정 기능으로 사용자의 관심을 끌거나 지연 문제를 처리하기 위해 웹 페이지에서 일정 시간이 지난 후 작업을 수행해야 할 수 있습니다. setTimeout은 대부분의 사용 사례에 적합하지만 타이머가 실행되거나 이론적으로 만료된 후에는 솔루션을 제공하지 않습니다. 이를 처리하기 위해 다음 캐싱 시스템을 사용할 수 있습니다.

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

var ReadyTime ;
$(function() { ReadyTime = jQuery.now(); })
$.afterDOMReady = $.createCache(function( defer, Delay ) {
delay | | 0;
$(function() {
var delta = $.now() - ReadyTime;
if ( delta >= 지연 ) { defer.resolve(); }
else {
setTimeout( defer.resolve, Delay - delta );
}
})
})

새로운 afterDOMReady 도우미 메소드는 최소한의 domReady를 제공합니다. 나중에 적절한 시간에 카운터를 칩니다. 지연 시간이 만료되면 콜백이 즉시 실행됩니다.

여러 애니메이션 동기화
애니메이션은 비동기 작업의 또 다른 일반적인 예입니다. 그러나 관련되지 않은 여러 애니메이션이 완료된 후 코드를 실행하는 것은 여전히 ​​다소 어렵습니다. 애니메이션 요소에 대한 Promise 객체를 얻는 기능은 jQuery 1.6에서만 제공되지만 수동으로 구현하기 쉽습니다.

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

$.fn.animatePromise = function( prop, speed, easing, callback) {
var elements = this
return $.Deferred(function ( defer ) {
elements.animate( prop, speed, easing, function() {
defer.resolve();
if ( 콜백 ) {
callback.apply( this, 인수 );
}
});
}).promise();
};

그런 다음 $.when()을 사용하여 다른 항목을 동기화할 수 있습니다. 애니메이션:

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

var fadeDiv1Out = $ ( " #div1" ).animatePromise({ opacity: 0 }),
fadeDiv2In = $( "#div1" ).animatePromise({ opacity: 1 }, "fast" )

$. when( fadeDiv1Out, fadeDiv2In ).done(function() {
/* 두 애니메이션 모두 종료됨 */
})

동일한 트릭을 사용하여 생성할 수도 있습니다. 일부 보조 방법:

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

$. 각각([ " SlideDown", "slideUp", "slideToggle", "fadeIn", "fadeOut", "fadeToggle" ],
function( _, name ) {
$.fn[ name "Promise" ] = function( speed , easing, callback ) {
var elements = this;
return $.Deferred(function( defer ) {
elements[ name ]( speed, easing, function() {
defer.resolve( );
if( 콜백 ) {
callback.apply( this, 인수 )
}).promise(); ;
});



다음과 같이 새 도우미 코드를 사용하여 애니메이션을 동기화하고 싶습니다.

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

$( "#div1" ).fadeOutPromise(),

$( "#div2" ).fadeInPromise ( "fast" )
).done(function() {
/* 두 애니메이션 모두 완료됨 */
})



일회성 이벤트

jQuery는 필요할 수 있는 모든 시간 바인딩 방법을 제공하지만 이벤트를 한 번만 처리하면 되는 경우에는 약간 까다로울 수 있습니다. ($.one() 과 다름) 예를 들어 처음 클릭하면 패널을 열고 패널이 열린 후 특정 초기화 논리를 수행하는 버튼이 필요할 수 있습니다. 이런 상황에 대처할 때 사람들은 대개 다음과 같은 코드를 작성합니다.

코드 복사 코드는 다음과 같습니다. var ButtonClicked = false;

$( "#myButton" ).click(function() {

if ( !buttonClicked ) {
buttonClicked = true;
initializeData( );
showPanel();
}
});



곧 패널이 열린 후 버튼을 클릭할 때 다음과 같은 작업을 추가할 수 있습니다.

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

if (buttonClicked) { /* 특정 작업 수행 */ }

이것은 매우 결합된 솔루션입니다. 다른 작업을 추가하려면 바인딩 코드를 편집하거나 복사본을 만들어야 합니다. 그렇지 않은 경우 유일한 옵션은 ButtonClicked를 테스트하는 것입니다. ButtonClicked가 false일 수 있으므로 새 코드가 실행되지 않을 수 있으므로 이 새 작업이 손실될 수 있습니다.

deferred를 사용하면 더 나은 결과를 얻을 수 있습니다(단순화를 위해 아래 코드는 단일 요소와 단일 이벤트 유형에만 적용되지만 여러 이벤트 유형 컬렉션으로 쉽게 확장될 수 있습니다):

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

$.fn.bindOnce = function( 이벤트, 콜백 ) {
var element = $( this[ 0 ] ),
defer = element.data( "bind_once_defer_" event )
if ( !defer ) {
defer = $.Deferred() ;
function deferCallback() {
element.unbind( event, deferCallback );
defer.resolveWith( this, 인수 )
element.bind( event , deferCallback )
element.data( "bind_once_defer_" event , defer );
}
return defer.done( callback ).promise()
};

코드는 다음과 같이 작동합니다. 다음:

• 요소에 주어진 이벤트에 바인딩된 지연된 객체가 있는지 확인하세요.
• 그렇지 않은 경우 먼저 이벤트를 시작하도록 생성하세요. 해결
• 그런 다음 주어진 이벤트를 바인딩하세요. 지연된 콜백 및 약속 반환
코드는 장황하지만 관련 문제 처리를 단순화합니다. 먼저 도우미 메서드를 정의해 보겠습니다.

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

$ .fn.firstClick = function( callback ) {
return this.bindOnce( "click", callback )
};

그럼 이전 논리를 다음과 같이 재구성할 수 있습니다.

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

var openPanel = $( "# myButton" ).firstClick();
openPanel.done( 초기화데이터 );
openPanel.done( showPanel )

패널을 연 후에만 몇 가지 작업을 수행해야 합니다.

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

openPanel .done(function() { /* 특정 작업 수행 */ })

패널이 열려 있지 않으면 작업이 수행됩니다. 버튼을 클릭할 때까지 지연됩니다.


Composition Assistant 위의 각 예를 개별적으로 살펴보면 Promise의 역할은 제한적입니다. 그러나 약속의 진정한 힘은 그것들을 함께 섞는 것입니다.


패널 콘텐츠를 로드하고 첫 번째 클릭 시 패널을 엽니다.
패널을 열고 해당 콘텐츠를 요청한 다음 콘텐츠가 페이드인되는 버튼이 있다고 가정해 보겠습니다. 앞서 정의한 도우미 메서드를 사용하면 다음과 같이 할 수 있습니다.

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

var panel = $( "#myPanel" );
panel.firstClick(function() {
$.when(
$.get( "panel.html" ),
panel.slideDownPromise ()
).done(function( ajaxResponse ) {
panel.html( ajaxResponse[ 0 ] ).fadeIn();
})

첫 번째 클릭 시 이미지를 로드하고 패널 열기
콘텐츠가 포함된 패널이 이미 있지만 버튼을 누를 때만 필요하다고 가정해 보겠습니다. 처음 클릭하면 이미지가 로드되고 모든 이미지가 성공적으로 로드되면 페이드 인됩니다. HTML 코드는 다음과 같습니다.

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

< div id="myPanel" >

data-src="image3 .png" />

이미지의 실제 경로를 설명하는 data-src 속성입니다. 그런 다음 이 사용 사례를 해결하기 위해 Promise Assistant를 사용하는 코드는 다음과 같습니다.

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

$( "#myButton" ).firstClick(function() {
var panel = $( "#myPanel" ),
promises = [];
$( "img" , 패널 ).each(function() {
var image = $( this ), src = element.attr( "data-src" );
if ( src ) {
promises.push(
$.loadImage( src ).then( function() {
image.attr( "src", src );
}, function() {
image.attr( "src", " error.png" );
} )
);
}
});

promises.push( panel.slideDownPromise() );

$ .when.apply( null, promise ).done(function() { panel.fadeIn(); });
})

여기서 중요한 점은 모든 LoadImage를 추적하는 것입니다. promise를 입력한 다음, 슬라이드다운 애니메이션 패널을 추가하세요. 따라서 버튼을 처음 클릭하면 패널이 아래로 슬라이드되고 이미지 로드가 시작됩니다. 패널을 아래로 밀고 모든 이미지가 로드된 후에만 패널이 페이드 인됩니다.

특정 지연 후 페이지에 이미지 로드
전체 페이지에 지연된 이미지 표시를 구현한다고 가정해 보겠습니다. 이를 위해 필요한 HTML 형식은 다음과 같습니다.

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

의미는 매우 간단합니다.

•image1.png, 세 번째 이미지는 바로 표시되고, 첫 번째 이미지는 1초 후에 표시됩니다.
·image2.png, 두 번째 이미지는 1초 후에 표시되고, 네 번째 이미지는 2초 후에 표시됩니다.
어떻게 할까요? 이것을 달성?

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

$( "img" ) .each( function() {
var element = $( this ),
src = element.attr( "data-src" ),
after = element.attr( "data-after" );
if ( src ) {
$.when(
$.loadImage( src ),
$.afterDOMReady( after )
).then(function() {
요소. attr( " src", src );
}, function() {
element.attr( "src", "error.png" )
} ).done(function() {
element.fadeIn();
});
}
})

이미지 자체를 지연 로드하려면 코드가 달라집니다. :

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

$( "img" ).each(function() {
var element = $( this ),
src = element.attr( "data-src" ),
after = element.attr( "data-after" ) ;
if ( src ) {
$.afterDOMReady( after, function() {
$.loadImage( src ).then(function() {
element.attr( "src", src );
}, function() {
element.attr( "src", "error.png" )
} ).done(function() {
element.fadeIn();
});
} );
}
})

여기서 로드를 시도하기 전에 먼저 지연 조건이 충족될 때까지 기다립니다. 이미지. 이는 페이지가 로드되는 동안 네트워크 요청 수를 제한하려는 경우에 적합합니다.

결론
보시다시피 Ajax 요청이 없어도 Promise는 매우 유용합니다. jQuery 1.5의 지연 구현을 사용하면 코드에서 비동기 작업을 분리하는 것이 매우 쉽습니다. 이렇게 하면 애플리케이션에서 로직을 쉽게 분리할 수 있습니다.