jQuery의 Deferred 객체에 대한 자세한 설명

deferredObject는 PromisesjQuery 인터페이스입니다. > 구현은 비동기 작업을 위한 일반적인 인터페이스로, 개발자가 일부 인터페이스를 통해 설정하는 역할을 합니다. 일반적인 예로는 Ajax 작업, 웹 페이지 애니메이션 , 웹 작업자 등이 있습니다. jQuery의 모든 Ajax 작업 기능은 기본적으로 지연된 개체

를 반환합니다.

Promise란 무엇입니까? 시간이 오래 걸리며 다른 작업은 대기하기 위해 대기해야 합니다. 전체 프로그램이 응답하지 않는 것을 방지하려면 일반적인 해결 방법은 해당 작업을 "콜백 함수

"(콜백)과 같습니다. 문제를 해결할 수는 있지만 몇 가지 중요한 단점이 있습니다.

1. 콜백 함수는 함수 매개변수, 이로 인해 함수의 입력과 출력이 매우 혼란스럽고 전체 프로그램을 읽을 수 없습니다.

2. 여러 작업이 있는 경우 콜백 함수를 하나만 지정할 수 있는 경우가 많습니다.

3. 전체 프로그램의 실행 프로세스가 중단되고 디버깅이러한 문제를 해결하기 위해 제안되었습니다. 콜백 함수를 대체하고 비동기 작업을 위한 솔루션이 되기 위한 핵심 아이디어는 객체를 반환하는 것입니다. 예를 들어 ajax 작업이 Promise 객체를 반환한다고 가정합니다.

그런 다음 Promise 객체에는 콜백 함수를 지정하는 데 사용할 수 있습니다. 비동기 작업이 완료되면 지정된 콜백 함수가 호출됩니다. :

위의 두 가지를 결합하면 프로그램의 흐름을 좀 더 명확하게 볼 수 있도록 코드를 결합해 보면 다음과 같습니다.
버전 1.7 이후에는 Ajax 연산이 Promise 객체를 직접 반환하므로 then 메소드를 사용하여 콜백 함수를 지정할 수 있습니다.

지연 객체 메서드

var promise = get('http://www.example.com');

$.deferred() 메서드

는 지연 객체를 생성하는 데 사용됩니다.

promise.then(function (content) {
  console.log(content)
})

코드는 다음과 같습니다.

done() 및 failure()

get('http://www.example.com').then(function (content) {
  console.log(content)
})

두 가지 방법을 모두 사용합니다. 콜백 함수를 바인드합니다. done()은 비동기 작업이 성공한 후의 콜백 함수를 지정하고, 실패()는 실패한 후의 콜백 함수를 지정합니다.

코드는 다음과 같습니다.

$.ajax({
    url:"/echo/json/",
    success: function(response)
    {
       console.info(response.name);
    }
});

원래 지연된 개체를 반환하므로 체인 쓰기를 사용할 수 있으며, 그 다음 다른 메서드(완료 및 실패 포함)를 연결할 수 있습니다. ).

resolve() 및 recognition()

$.ajax({
    url: "/echo/json/",
}).then(function (response) {
    console.info(response.name);
});

은 지연된 개체의 상태

를 변경하는 데 사용됩니다. Resolve()는 상태를 비동기 작업 성공으로 변경하고, Reject()는 상태를 작업 실패로 변경합니다.

코드는 다음과 같습니다.

resolve()가 호출되면 done() 및 then() 메서드에서 지정한 콜백 함수는 다음과 같습니다. 순차적으로 실행됩니다. 일단 거부()가 호출되면 실패() 및 then() 메서드에 지정된 콜백 함수가 순차적으로 실행됩니다.

var deferred = $.deferred();

상태 메소드

이 메소드는 지연된 객체의 현재 상태를 반환하는 데 사용됩니다.

코드는 다음과 같습니다.

이 메서드에는

var deferred = $.Deferred();
deferred.done(function(value) {
   alert(value);
});

notify() 및 세 가지 반환 값이 있습니다. Progress( )

progress()는 통지() 메소드가 호출될 때 실행될 콜백 함수를 지정하는 데 사용됩니다. 그 목적은

진행률 표시줄 의 진행률을 정기적으로 반환하는 등 비동기 작업 실행 중에 특정 작업을 수행할 수 있도록 인터페이스를 제공하는 것입니다.

코드는 다음과 같습니다.

var deferred = $.Deferred();
deferred.done(function(value) {
   alert(value);
});
deferred.resolve("hello world");

then()

then()도 콜백 함수를 지정하는 데 사용됩니다. , 즉 세 개의 매개변수, 즉 세 개의 콜백 함수를 허용할 수 있습니다. 첫 번째 매개변수는 Resolve 시 호출되는 콜백 함수, 두 번째 매개변수는 Reject 시 호출되는 콜백 함수, 세 번째 매개변수는 Progress() 메서드에서 호출되는 콜백 함수입니다.

코드는 다음과 같습니다.

deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

在jQuery 1.8之前，then()只是.done().fail()写法的语法糖，两种写法是等价的。在jQuery 1.8之后，then()返回一个新的deferred对象，而done()返回的是原有的deferred对象。如果then()指定的回调函数有返回值，该返回值会作为参数，传入后面的回调函数。

代码如下:

var defer = jQuery.Deferred();
defer.done(function(a,b){
            return a * b;
}).done(function( result ) {
            console.log("result = " + result);
}).then(function( a, b ) {
            return a * b;
}).done(function( result ) {
            console.log("result = " + result);
}).then(function( a, b ) {
            return a * b;
}).done(function( result ) {
            console.log("result = " + result);
});
defer.resolve( 2, 3 );

在jQuery 1.8版本之前，上面代码的结果是：

代码如下:

result = 2 
result = 2 
result = 2

在jQuery 1.8版本之后，返回结果是

代码如下:

result = 2 
result = 6 
result = NaN

这一点需要特别引起注意。

代码如下:

$.ajax( url1, { dataType: "json" } )
.then(function( data ) {
    return $.ajax( url2, { data: { user: data.userId } } );
}).done(function( data ) {
  // 从url2获取的数据
});

上面代码最后那个done方法，处理的是从url2获取的数据，而不是从url1获取的数据。

利用then()会修改返回值这个特性，我们可以在调用其他回调函数之前，对前一步操作返回的值进行处理。

代码如下:

var post = $.post("/echo/json/")    
.then(function(p){       
 return p.firstName;    
 });
 post.done(function(r){ console.log(r); });

上面代码先使用then()方法，从返回的数据中取出所需要的字段（firstName），所以后面的操作就可以只处理这个字段了。

有时，Ajax操作返回json字符串里面有一个error属性，表示发生错误。这个时候，传统的方法只能是通过done()来判断是否发生错误。通过then()方法，可以让deferred对象调用fail()方法。

代码如下:

var myDeferred = $.post('/echo/json/', {json:JSON.stringify({'error':true})})
    .then(function (response) {
            if (response.error) {
                return $.Deferred().reject(response);
            }
            return response;
        },function () {
            return $.Deferred().reject({error:true});
        }
    );
myDeferred.done(function (response) {
        $("#status").html("Success!");
    }).fail(function (response) {
        $("#status").html("An error occurred");
    });

always()

always()也是指定回调函数，不管是resolve或reject都要调用。

pipe方法

pipe方法接受一个函数作为参数，表示在调用then方法、done方法、fail方法、always方法指定的回调函数之前，先运行pipe方法指定的回调函数。它通常用来对服务器返回的数据做初步处理。

promise对象

大多数情况下，我们不想让用户从外部更改deferred对象的状态。这时，你可以在deferred对象的基础上，返回一个针对它的promise对象。我们可以把后者理解成，promise是deferred的只读版，或者更通俗地理解成promise是一个对将要完成的任务的承诺。

你可以通过promise对象，为原始的deferred对象添加回调函数，查询它的状态，但是无法改变它的状态，也就是说promise对象不允许你调用resolve和reject方法。

代码如下:

function getPromise(){
    return $.Deferred().promise();
}
try{
    getPromise().resolve("a");
} catch(err) {
    console.log(err);
}

上面的代码会出错，显示TypeError {} 。

jQuery的ajax() 方法返回的就是一个promise对象。此外，Animation类操作也可以使用promise对象。

代码如下:

var promise = $('p.alert').fadeIn().promise();

$.when()方法

$.when()接受多个deferred对象作为参数，当它们全部运行成功后，才调用resolved状态的回调函数，但只要其中有一个失败，就调用rejected状态的回调函数。它相当于将多个非同步操作，合并成一个。

代码如下:

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

上面代码表示，要等到三个ajax操作都结束以后，才执行then方法指定的回调函数。

when方法里面要执行多少个操作，回调函数就有多少个参数，对应前面每一个操作的返回结果。

代码如下:

$.when(
    $.ajax( "/main.php" ),
    $.ajax( "/modules.php" ),
    $.ajax( "/lists.php" )
).then(function (resp1, resp2, resp3){
    console.log(resp1);
    console.log(resp2);
    console.log(resp3);
});

上面代码的回调函数有三个参数，resp1、resp2和resp3，依次对应前面三个ajax操作的返回结果。

when方法的另一个作用是，如果它的参数返回的不是一个Deferred或Promise对象，那么when方法的回调函数将 立即运行。

代码如下:

$.when({testing: 123}).done(function (x){
  console.log(x.testing); // "123"
});

上面代码中指定的回调函数，将在when方法后面立即运行。

利用这个特点，我们可以写一个具有缓存效果的异步操作函数。也就是说，第一次调用这个函数的时候，将执行异步操作，后面再调用这个函数，将会返回缓存的结果。

代码如下:

function maybeAsync( num ) {  
var dfd = $.Deferred();  
if ( num === 1 ) {    
setTimeout(function() {      
dfd.resolve( num );    
}, 100);    
return dfd.promise(); 
 }  
 return num;}$.when(maybeAsync(1)).then(function (resp){  
 $('#target').append('
' + resp + '
');});
$.when(maybeAsync(0)).then(function (resp){  
$('#target').append( '
' + resp + '
');});

上面代码表示，如果maybeAsync函数的参数为1，则执行异步操作，否则立即返回缓存的结果。

实例

wait方法

我们可以用deferred对象写一个wait方法，表示等待多少毫秒后再执行。

代码如下:

$.wait = function(time) {
  return $.Deferred(function(dfd) {
    setTimeout(dfd.resolve, time);
  });
}

使用方法如下：

代码如下:

$.wait(5000).then(function() {
  alert("Hello from the future!");
});

改写setTimeout方法

在上面的wait方法的基础上，还可以改写setTimeout方法，让其返回一个deferred对象。

代码如下:

function doSomethingLater(fn, time) {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve(fn());
  }, time || 0);
  return dfd.promise();
}
var promise = doSomethingLater(function (){
  console.log( '已经延迟执行' );
}, 100);

自定义操作使用deferred接口

我们可以利用deferred接口，使得任意操作都可以用done()和fail()指定回调函数。

代码如下:

Twitter = {
  search:function(query) {
    var dfr = $.Deferred();
    $.ajax({
     url:"http://search.twitter.com/search.json",
     data:{q:query},
     dataType:'jsonp',
     success:dfr.resolve
    });
    return dfr.promise();
  }
}

使用方法如下：

代码如下:

Twitter.search('intridea').then(function(data) {  alert(data.results[0].text);});

deferred对象的另一个优势是可以附加多个回调函数。

代码如下:

function doSomething(arg) {
  var dfr = $.Deferred();
  setTimeout(function() {
    dfr.reject("Sorry, something went wrong.");
  });
  return dfr;
}
doSomething("uh oh").done(function() {
  alert("Won't happen, we're erroring here!");
}).fail(function(message) {
  alert(message)
});

 以上就是jQuery之Deferred对象详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！