JQuery 지연 객체 분석

JQuery는 Deferred 객체를 사용하여 ES2016(또는 es7)의 Promise와 유사한 기능을 제공합니다.
JQuery의 AJAX 요청 함수는 Deferred 객체를 반환합니다.
Defered를 사용하여 비동기 호출을 더 읽기 쉽게 만들고 고급 사용(여러 콜백 함수 지정/여러 AJAX 요청 대기)을 활성화합니다. heferred rreeee

를 사용한 jQuery

$.getJSON('url', data=>{// 处理返回的JSON数据console.log(data);}, err=>{// 处理出错信息console.log(err.status);})

ajax 요청의 전통적인 ajax 요청이 기사는 연기/약속의 국가 변화 과정 분석에 중점을두고 국가 변화 과정을 설명하는 데 중점을 둡니다. 실제 코딩에서의 지연된 객체 응용 프로그램.

• Create Deferred

사용자는 Deferred 함수를 사용하여 지연된 객체를 생성할 수 있습니다

$.getJSON('url').done(data=>{console.log(data);}).fail(err=>{console.log(err.status);});

지연된 객체의 상태

지연된 객체에는 다음 세 가지 상태가 있습니다

Deferred 函数来创建 Deferred 对象

var d1 = $.Deferred();console.log(d1.state());

Deferred 对象的状态

Deferred 对象有以下三种状态

• pending

• rejected

• resolved

Deferred 对象可以从pending状态转换到rejected状态或者resolved.
这种状态的转换是单向的，也就是说一旦Deferred对象的状态是 rejected/resolved, 对象的状态将不可变。

得到 Deferred 对象的状态

JQuery 提供了三个函数来查看/修改Deferred对象的状态:

• deferred.state(), 返回一个字符串表示当前 Deferred 对象的状态

• deferred.reject(), 将对象的状态设置为 rejected

• deferred.resolve(), 将对象的状态设置为 resolved

下面的代码定义了两个 Deferred 对象，并分别使用 resolve/reject 改变他们的状态

let d1 = $.Deferred();console.log(d1.state()); // "pending"d1.resolve();console.log(d1.state()); // "resolved"let d2 = $.Deferred();console.log(d2.state()); // "pending"d2.reject();console.log(d2.state()); // "rejected"

Deferred 回调函数

JQuery 提供了方法来指定当 Deferred 对象状态发生变化时的回调函数

指定回调函数

使用 then 方法

then 方法接受两个函数作为参数，当对象的状态变成 resolved, 第一个函数会被调用。
当对象的状态变成 rejected, 第二个函数会被调用。

第一个函数接受一个参数，该参数是 defered.resolve 函数被调用时传递的第一个参数。
第二个函数接受一个参数，该参数是 defered.reject 函数被调用时传递的第一个参数。

• 使用 then 和 resolve 方法

var d1 = $.Deferred();// 注册回调函数d1.then(function(data){console.log('First function: ' + data.state);}, function(err){console.log('Second function: ' + err);});// 做一些耗时的操作// 改变 deferred 对象状态为 resolved// 回调函数将被调用，打印信息：First function: successedd1.resolve({state: 'successed'});

• 使用 then 和 reject 方法

var d2 = $.Deferred();// 注册回调函数d2.then(function(data){console.log('First function: ' + data.state);}, function(err){console.log('Second function: ' + err.state);});// 改变 deferred 对象状态为 rejected// 回调函数将被调用，打印信息：Second function: failedd2.reject({state: 'failed'});

使用 done 方法

使用 done 方法可以指定当 deferred 对象状态变成 resolved 时调用的函数

var deferred = $.Deferred();deferred.done(function(data){console.log('Done: ' + data.state);});deferred.resolve({state: 'successed'});

使用 fail 方法

使用 fail 方法可以指定当 deferred 对象状态变成 rejected 时调用的函数

var deferred = $.Deferred();deferred.fail(function(err){console.log('Fail: ' + err.state);})deferred.resolve({state: 'failed'});

使用 always 方法

always 方法接受一个函数作为参数，只要 Deferred 对象的状态发生变化，该函数都会被调用。

链式调用

因为 then/done/fail 函数返回的仍然是类 Deferred 对象，所以我们可以使用他们来指定多个回调函数.
下面这个例子用 done/fail 来指定多个

var deferred = $.Deferred();deferred.done(data=>{// Do something}).done(data=>){// Do something}.fail(err=>{// Handle the error}).always(()=>{// Clean the environment})

Promise 对象

JQuery 还提供了 Promise 对象，可以通过 Deferred 对象的 promise 方法来获取该对象的 Promise 对象。=
Promise 对象有以下特点：

• Promise 对象没有 reject/resolve 方法

• Promise 对象的状态跟 Deferred 对象保持一致

• Promise 对象通过 state() 方法获取跟它绑定的 Deferred 的状态

• Proimse 对象也可以使用 then/done/fail

  pending

• 거부됨

resolved

Deferred 객체는 보류 상태에서 거부됨 상태로 전환되거나 해결될 수 있습니다.

이 상태 전환은 단방향입니다. 즉, Deferred 객체의 상태가 거부되면/ 해결되면 객체의 상태는 변경할 수 없게 됩니다.

Deferred 객체의 상태 가져오기

JQuery는 Deferred 객체의 상태를 보거나 수정하는 세 가지 함수를 제공합니다.🎜🎜🎜🎜deferred.state()는 현재 Deferred 객체를 나타내는 문자열을 반환합니다. 객체 상태 🎜🎜🎜🎜deferred.reject(), 객체 상태를 거부됨🎜🎜🎜🎜deferred.resolve()으로 설정, 객체 상태를 해결됨🎜 🎜 🎜🎜다음 코드는 두 개의 Deferred 객체를 정의하고 확인/거부를 사용하여 각각 상태를 변경합니다🎜🎜

var deferred = $.Deferred();var promise = deferred.promise();deferred.reject();console.log(deferred.state());  // rejectedconsole.log(promise.state());   // rejectedconsole.log(promise.promise() === promise);   // true, Promise 对象的 promis() 方法返回的是它自己

🎜🎜Deferred 콜백 함수🎜🎜JQuery는 Deferred 객체의 상태가 변경될 때 콜백 함수를 지정하는 메서드를 제공합니다🎜 🎜지정 콜백 함수🎜

then 메소드 사용

🎜then 메소드는 객체의 상태가 해결되면 두 함수를 매개변수로 받습니다. 🎜객체의 상태가 거부되면 두 번째 함수가 호출됩니다. 🎜🎜첫 번째 함수는 defered.resolve 함수가 호출될 때 전달되는 첫 번째 매개 변수인 하나의 매개 변수를 허용합니다. 🎜두 번째 함수는 defered.reject 함수가 호출될 때 전달되는 첫 번째 매개변수인 하나의 매개변수를 허용합니다. 🎜

🎜🎜🎜then 사용 및 메서드 해결🎜🎜🎜🎜

var d1 = $.Deferred();var d2 = d1.done();var d3 = d1.fail();console.log(d1 === d2); // trueconsole.log(d1 === d3); // true

🎜🎜🎜🎜then 및 거부 메서드 사용🎜🎜🎜🎜

var d1 = $.Deferred();var p2 = d1.then();  // 调用 then 方法返回一个 Promise 对象var p3 = d1.then();  // 调用 then 方法返回一个新的 Promise 对象console.log('reject' in d1);       // false, 查看 then 方法返回的对象中是否有 reject 方法console.log('reject' in p2);       // false, 查看 then 方法返回的对象中是否有 reject 方法console.log(p2 === d1);            // false, 检查 d1 是否与 p2 相等console.log(p2 === d1.promise());  // false, 查看 d1 的 promise 是否与 p2 相等console.log(p2 === p3);            // false, p2 和 p3 的值不同

🎜

완료 메서드 사용

🎜완료 메서드 사용 지연된 객체 상태가 해결될 때 호출할 함수를 지정할 수 있습니다🎜

🎜

var deferred = $.Deferred();var new_promise = deferred.then();deferred.reject('reject')console.log(`d1 state: ${deferred.state()}`); // rejectedconsole.log(`new_promise state: ${new_promise.state()}`); // pendingsetTimeout(`console.log("new_promise state after 100 miliseconds: ${new_promise.state()}")`, 100); // 100 毫秒后， new_promise 的状态变成了 rejected

🎜

실패 메서드 사용

🎜실패 메서드를 사용하여 다음과 같은 경우 호출할 함수를 지정하세요. 지연된 객체 상태가 거부됩니다. 함수 🎜

🎜

var d1 = $.Deferred();function fun1(data){console.log(`p2 state in fun1: ${p2.state()}`);console.log(`data in fun1: ${data}`);return data * 3;}function fun2(error){return 'new data from fun2';}var p2 = d1.then(fun1, fun2);p2.done(data=>{console.log(`p2 state in done: ${p2.state()}`);console.log(`data in done: ${data}`);});d1.resolve(10);/* 屏幕输出为p2 state in fun1: pendingdata in fun1: 10p2 state in done: resolveddata in done: 30*/

🎜

항상 메소드 사용

🎜항상 메소드는 함수를 매개변수로 허용하며, 이는 상태가 바뀔 때마다 호출됩니다. 지연된 객체 변경. 🎜

🎜연쇄 호출🎜🎜then/done/fail 함수는 여전히 지연된 객체를 반환하기 때문에 이를 사용하여 여러 콜백 함수를 지정할 수 있습니다.🎜다음 예에서는 done/fail을 사용하여 여러 🎜🎜

function say_hello(){// 创建 Deferred 对象var deferred = $.Deferred();// 做一些耗时的操作，操作完成后调用 resolve 或者 reject 函数结束。// 我们用 setTimeout 函数模拟一段耗时操作：// 等待五秒钟后，调用 Deferred 的 resolve 方法来改变状态setTimeout(deferred.resolve.bind(deferred, 'hello world'), 5000);// 也可以使用 AJAX 操作/*    $.getJSON('/api/names').done(data=>{        if(data.state == 'successed'){            deferred.resolve(data);        }else{            deferred.reject(data);        }    });    */return deferred.promise();  // 返回 promise 对象， 防止外界对 Deferred 对象的状态进行改变}// 调用 say_hello函数，并使用 done/fail/then 方法注册回调函数say_hello().done(msg=>{console.log(msg);});

🎜을 지정합니다. 🎜Promise 객체🎜🎜JQuery도 Promise 객체를 제공하는데, Deferred 객체의 promise 메소드를 통해 해당 객체의 Promise 객체를 얻을 수 있습니다. =🎜Promise 개체에는 다음과 같은 특징이 있습니다. 🎜🎜🎜🎜Promise 개체에는 reject/resolve 메서드가 없습니다.🎜🎜🎜🎜Promise 개체의 상태는 다음과 같습니다. Deferred 객체와 일치🎜🎜🎜🎜 Promise 객체는 state() 메서드를 통해 자신에 바인딩된 Deferred의 상태를 얻습니다🎜🎜🎜🎜Proimse 객체는 then을 사용할 수도 있습니다. code>/done/ fail 메소드를 사용하여 콜백 함수를 지정합니다🎜🎜🎜🎜Promise는 Promise 메소드를 호출하여 자기 자신을 얻을 수 있습니다🎜🎜🎜🎜

// 创建一个函数，如果参数大于500， 则将内置的 Deferred 对象状态变为 resolved// 如果参数小于500， 则将内置的 Deferred 对象状态变为 rejectedfunction get_promise(delay){// 创建 Deferred 对象var deferred = $.Deferred();if(delay > 500){setTimeout(deferred.resolve.bind(deferred, delay/100), delay);}else{setTimeout(deferred.reject.bind(deferred, delay/100), delay);}return deferred.promise();  // 返回 promise 对象}// 如果任一参数状态转变为 rejected, when 函数产生的 promise 对象状态会理解变为 rejected。// 并将第一个 Deferred 对象的错误信息传递给回调函数$.when(get_promise(800), get_promise(100), get_promise(300)).fail(error=>{console.log(error); // 1});// 否则 when 函数会等待所有的 Deferred 对象状态变为 resolved, 并将所有 Deferred 对象的返回值依次传递给回调函数$.when(get_promise(900), get_promise(600), get_promise(1000)).done((d1, d2, d3)=>{console.log(d1); // 9console.log(d2); // 6console.log(d3); // 10});$.when(get_promise(800), get_promise(900), get_promise(1000)).done((...datas)=>{console.log(datas); // [8, 9, 10]});

🎜🎜그런 다음 차이점은 done/fail🎜🎜done/fail은 Deferred 객체 자체를 반환합니다. 🎜Then 메소드는 새로운 Promise 객체를 반환합니다.🎜🎜done/fail 메소드를 사용하여 Deferred 객체를 반환합니다.🎜🎜rrreee🎜

使用 then 方法返回 Promise 对象

使用 then 方法我们需要明白的几个关键点是：

方法返回的是 Promise 对象，该对象没有 resolve/reject 方法。

Deferred 对象的 then 方法， 会创建一个新的 Deferred 对象，并返回新 Deferred 对象的 Promise 对象。
而且 then 方法返回的对象 跟 Deferred 对象的 Promise 对象不相等， 多次调用 then 对象会产生多个 Deferred 对象。
下面的例子对比了多次调用 then 方法产生的 Promise 对象

var d1 = $.Deferred();var p2 = d1.then();  // 调用 then 方法返回一个 Promise 对象var p3 = d1.then();  // 调用 then 方法返回一个新的 Promise 对象console.log('reject' in d1);       // false, 查看 then 方法返回的对象中是否有 reject 方法console.log('reject' in p2);       // false, 查看 then 方法返回的对象中是否有 reject 方法console.log(p2 === d1);            // false, 检查 d1 是否与 p2 相等console.log(p2 === d1.promise());  // false, 查看 d1 的 promise 是否与 p2 相等console.log(p2 === p3);            // false, p2 和 p3 的值不同

Deferred 对象的状态发生改变后，then 方法产生的 Promise 对象的状态不会立即发生变化

Deferred 对象状态发生变化后， 等待一段时间后 then 方法产生的 Promise 对象的状态才会发生相应的变化

var deferred = $.Deferred();var new_promise = deferred.then();deferred.reject('reject')console.log(`d1 state: ${deferred.state()}`); // rejectedconsole.log(`new_promise state: ${new_promise.state()}`); // pendingsetTimeout(`console.log("new_promise state after 100 miliseconds: ${new_promise.state()}")`, 100); // 100 毫秒后， new_promise 的状态变成了 rejected

发生了什么

Deferred 对象的状态发生改变后，then 方法产生的 Promise 对象的状态并没有立即发生变化， 而是等待了一段时间后才改变。
这段时间内，发生了什么那？
我们以调用 Deferred 对象的 resolve 方法作为例子来说明。 调用 reject 方法的情况与此类似。

• 首先假设我们构造了Deferred 对象 d1

• 然后调用 then 方法，并且传入两个函数作为参数 fun1, fun2： var p2 = d1.then(fun1, fun2)

• 调用 d1.resolve(data) 方法将 d1 的状态设置为 resolved, 此时d1 的状态是 resolved, p2 的状态是 pending

• fun1 会被调用, 参数为 d1.resolve 方法的参数: var new_data = fun1(data)

• 假设 p2 对应的 Deferred 对象是 d2.

• d2 的 resolve 方法会被调用， 参数为 fun1 的返回值: d2.resolve(new_data)

• p2 的状态变为 resolved

• p2 的回调函数会被调用

下面的代码展示了 then 方法产生的 Promise 对象的状态变化。以及如何给回调函数传递参数

var d1 = $.Deferred();function fun1(data){console.log(`p2 state in fun1: ${p2.state()}`);console.log(`data in fun1: ${data}`);return data * 3;}function fun2(error){return 'new data from fun2';}var p2 = d1.then(fun1, fun2);p2.done(data=>{console.log(`p2 state in done: ${p2.state()}`);console.log(`data in done: ${data}`);});d1.resolve(10);/* 屏幕输出为p2 state in fun1: pendingdata in fun1: 10p2 state in done: resolveddata in done: 30*/

在网页中使用 Deferred

自定义函数

明白了 Deferred 的原理，我们就可以使用 Deferred.
下面一段代码定义了一个函数， 在函数中定义了一些耗时的操作。
函数返回 Promise 对象， 可以使用 done/fail/then 注册回调函数

function say_hello(){// 创建 Deferred 对象var deferred = $.Deferred();// 做一些耗时的操作，操作完成后调用 resolve 或者 reject 函数结束。// 我们用 setTimeout 函数模拟一段耗时操作：// 等待五秒钟后，调用 Deferred 的 resolve 方法来改变状态setTimeout(deferred.resolve.bind(deferred, 'hello world'), 5000);// 也可以使用 AJAX 操作/*    $.getJSON('/api/names').done(data=>{        if(data.state == 'successed'){            deferred.resolve(data);        }else{            deferred.reject(data);        }    });    */return deferred.promise();  // 返回 promise 对象， 防止外界对 Deferred 对象的状态进行改变}// 调用 say_hello函数，并使用 done/fail/then 方法注册回调函数say_hello().done(msg=>{console.log(msg);});

$.when

跟 ES2016 中 Prmomise.all 函数类似。
JQuery 提供了 when 函数， 它可以接受多个 Deferred/Promise 对象作为参数。并返回一个 Promise 对象。
新的 Promise 对象会等待参数中所有的对象状态变为 resolved/reject。
如果参数中任何一个对象的状态变为 rejected, 那么 Promise 对象的状态变为 rejected。 否则变为 resolved。

// 创建一个函数，如果参数大于500， 则将内置的 Deferred 对象状态变为 resolved// 如果参数小于500， 则将内置的 Deferred 对象状态变为 rejectedfunction get_promise(delay){// 创建 Deferred 对象var deferred = $.Deferred();if(delay > 500){setTimeout(deferred.resolve.bind(deferred, delay/100), delay);}else{setTimeout(deferred.reject.bind(deferred, delay/100), delay);}return deferred.promise();  // 返回 promise 对象}// 如果任一参数状态转变为 rejected, when 函数产生的 promise 对象状态会理解变为 rejected。// 并将第一个 Deferred 对象的错误信息传递给回调函数$.when(get_promise(800), get_promise(100), get_promise(300)).fail(error=>{console.log(error); // 1});// 否则 when 函数会等待所有的 Deferred 对象状态变为 resolved, 并将所有 Deferred 对象的返回值依次传递给回调函数$.when(get_promise(900), get_promise(600), get_promise(1000)).done((d1, d2, d3)=>{console.log(d1); // 9console.log(d2); // 6console.log(d3); // 10});$.when(get_promise(800), get_promise(900), get_promise(1000)).done((...datas)=>{console.log(datas); // [8, 9, 10]});

위 내용은 JQuery 지연 객체 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：

jquery 剖析 对象

원천：php.cn

이전 기사：Jquery를 기반으로 도, 시, 구, 군의 3단계 연계 구현 다음 기사：jQuery 기본 구문 요약

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• PHP 배열에 요소를 추가하는 방법
  2023-03-14 15:58:02
• 간단한 객관식 평가 시스템을 구현하는 JS를 보여주는 예
  1970-01-01 08:00:00
• 동일한 IP의 여러 제출을 제한하는 PHP 솔루션
  2023-03-15 07:38:01
• 정규식을 사용하여 HTML에서 양식 유효성 검사 구현
  1970-01-01 08:00:00
• JavaScript 엄격 모드의 포인팅 문제에 대한 자세한 설명
  1970-01-01 08:00:00
• Java로 트리 메뉴(다단계 메뉴 포함)를 작성하기 위한 예제 코드
  1970-01-01 08:00:00
• 마우스 오버 시 부드러운 전환을 구현하는 CSS3의 예에 대한 자세한 설명
  1970-01-01 08:00:00
• Swiper 캐러셀 이미지 소스코드 공유 분석
  1970-01-01 08:00:00
• VsCode 플러그인 요약 및 구성
  1970-01-01 08:00:00
• HttpUtils 요청 도구 클래스 코드
  1970-01-01 08:00:00

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

2

1840

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

10

2009

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1693

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1594

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1612

관련 주제

더>

• jquery 플러그인이란 무엇입니까?
• jquery로 json을 조작하는 방법
• Jquery에서 요소를 삭제하는 방법
• jQuery hover() 메소드 사용
• jquery는 페이징 방법을 구현합니다.
• Jquery의 숨겨진 요소는 무엇입니까?
• jquery에서 강조표시되는 내용
• 비트코인 가격