Jquery에서 지연된 개체 사용 소개(예제 포함)

이 글은 jquery의 지연 객체 사용법을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

지연 객체란 무엇인가요?

jQuery 1.5에 도입된 지연 객체는 jQuery.Deferred() 메서드를 호출하여 연결 가능한 도구 객체를 생성합니다. 콜백 대기열에 여러 콜백을 등록하고, 콜백 대기열을 호출하고, 동기 또는 비동기 함수의 성공 또는 실패 상태를 대체할 준비를 할 수 있습니다. ——jQuery API 중국어 문서 간단히 말하면, 지연된 객체는 jQuery의 콜백 함수 솔루션입니다. 영어로 defer는 "지연"을 의미하므로 deferred 객체의 의미는 미래의 특정 시점까지 실행을 "지연"하는 것입니다. 시간이 많이 걸리는 작업을 처리하는 방법에 대한 문제를 해결하고 해당 작업에 대한 더 나은 제어 기능과 통합 프로그래밍 인터페이스를 제공합니다. ——Ruan Yifeng

지연 객체의 주요 기능

Ajax 연산의 체인 작성 방법

$.ajax("test.html")
　  .done(function(){ alert("success"); })
　  .fail(function(){ alert("error"); });

$.ajax() 연산이 완료된 후 jQuery 버전 1.5.0 미만을 사용하는 경우 XHR은 반환됨 개체는 연결될 수 없습니다. 버전이 1.5.0보다 높으면 지연된 개체가 반환되고 연결 작업이 수행될 수 있습니다. 보시다시피 done()은 성공 메서드와 동일하고, 실패()는 오류 메서드와 동일합니다. 체인 라이팅 방식을 채택한 후 코드의 가독성이 크게 향상되었습니다.

여기서는 jqXHR 객체를 강조합니다. jQuery 1.5부터 $.ajax() 자체가 반환하는 jqXHR 객체는 지연된 객체이므로 위 코드와 같이 체인으로 호출할 수 있습니다.

jQuery 1.5부터 $.ajax()가 반환하는 jqXHR 객체는 Promise 인터페이스를 구현하므로 Promise의 모든 속성, 메서드 및 동작을 갖습니다. (자세한 내용은 지연된 개체를 참조하세요.) $.ajax()에서 콜백 함수의 이름을 통일하고 사용하기 쉽게 만들기 위해서입니다. jqXHR은 .error() .success() 및 .complete() 메소드도 제공합니다. 이 메소드는 모두 함수인 매개변수를 취합니다. 이 함수는 $.ajax() 요청이 끝날 때 호출되며, 이 함수가 수신한 매개변수는 $.ajax() 함수가 호출될 때의 매개변수와 일치합니다. . 이를 통해 단일 요청에 대해 여러 콜백 함수를 할당할 수 있으며, 요청이 완료된 후 콜백 함수에 할당할 수도 있습니다(요청이 완료되면 콜백 함수가 즉시 호출됩니다).

참고: jqXHR.success(), jqXHR.error() 및 jqXHR.complete() 콜백은 jQuery 1.8부터 더 이상 사용되지 않으며 jQuery 3.0부터 제거됩니다. jqXHR.done(), jqXHR .fail()을 사용할 수 있습니다. , 그리고 jqXHR.always() 대신에.

동일한 작업에 여러 콜백 함수를 지정하세요
지연 객체의 가장 큰 장점 중 하나는 여러 콜백 함수를 자유롭게 추가할 수 있다는 것입니다. 위 코드를 예로 들면, ajax 작업이 성공한 후 원래 콜백 함수 외에 다른 콜백 함수도 실행하고 싶은 경우 어떻게 해야 합니까? 매우 간단합니다. 마지막에 추가하기만 하면 됩니다.

$.ajax("test.html")
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); })
　   .done(function(){ alert('第二个回调函数！'); });

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

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

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

$.when($.ajax("test1.html"), $.ajax("test2.html"))
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); });

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

$.when() 자세한 사용법은 설명서를 참고해주세요.

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

시간이 많이 걸리는 작업 대기에 대한 콜백 함수를 지정하는 구체적인 예를 살펴보겠습니다.

var wait = function (dtd) {
    var dtd = $.Deferred(); // 在函数内部，新建一个Deferred对象
    var tasks = function () {
        alert('执行完毕！');
        dtd.resolve(); // 改变Deferred对象的执行状态
    };

    setTimeout(tasks, 5000);
    return dtd.promise(); // 返回promise对象
};

$.when(wait())
    .done(function () { alert('success'); })
    .fail(function () { alert('error'); });

또 다른 방법은 대기 함수를 $.Deferred()에 직접 전달하는 것입니다. $.Deferred()：

$.Deferred(wait)
　　 .done(function(){ alert('success'); })
　　 .fail(function(){ alert('error'); });

jQuery 规定，$.Deferred() 可以接受一个函数名（注意，是函数名）作为参数，$.Deferred()

$.when($.ajax( '/main.php' ))
　　 .then(successFunc, failureFunc);

jQuery는 $.Deferred()가

함수 이름

(참고, 함수 이름임)을 매개변수로 허용할 수 있고 $.Deferred()에서 생성된 지연을 허용한다고 규정합니다. code> Object가 이 함수의 기본 매개변수로 사용됩니다. <p></p>자세한 내용은 Ruan Yifeng의 문서를 참조하세요. <p><br>지연 객체 </p> <p>$.Deferred() 메서드는 지연 객체를 생성합니다. </p>jQuery.Deferred([beforeStart]) 팩토리 함수는 새로운 지연된 객체를 생성합니다. <p></p>설명: 연결된 유틸리티 개체를 반환하는 팩토리 함수는 반환 개체 메서드를 사용하여 콜백 대기열에 여러 콜백을 등록하고, 콜백 대기열을 호출하고, 동기 또는 비동기 함수의 성공 또는 실패 상태를 전달합니다. 🎜🎜beforeStart : 이전에 호출한 함수를 반환하는 생성자인 Function(Deferred deferred)을 입력합니다. 🎜<p>jQuery.Deferred 方法可以传递一个可选的函数， 这个函数在方法返回之前调用，并且会把新的 deferred（延迟）对象作为 this 对象，将其作为第一个参数传递给函数。例如，被调用的函数可以使用 deferred.then() 绑定回调。</p> <p>deferred.done() 指定操作成功时的回调函数。</p> <p>deferred.fail() 指定操作失败时的回调函数。</p> <p>deferred.promise() 没有参数时，返回一个新的 deferred。 对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署 deferred 接口。</p> <p>deferred.resolve() 手动改变 deferred 对象的运行状态为"已完成"，从而立即触发 done() 方法。</p> <p>一个 Deferred（延迟）对象开始于 pending 状态。 任何回调使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到这个对象都是排队等待执行。调用 deferred.resolve() 转换 Deferred（递延）到 resolved（解决）的状态，并立即执行设置中任何的 doneCallbacks。调用 deferred.reject() 转换 Deferred（递延）到 rejected（拒绝）的状态，并立即执行设置中任何的 failCallbacks。一旦对象已经进入了解决或拒绝状态，它处于该状态。回调仍然可以添加到解决或拒绝 Deferred（递延）- 他们会立即执行。</p> <p>$.ajax() 返回的 jqXHR 对象 会根据请求返回的结果，自动改变自身的执行状态。但是，对于其他通过 $.Deferred() 方法生成的 deferred 对象，它们的执行状态必须由程序员手动指定，由代码决定在什么时候触发回调函数。</p> <p>deferred.reject() 这个方法与 deferred.resolve() 正好相反，调用后将 deferred 对象的运行状态变为"已失败"，从而立即触发 fail() 方法。</p> <p>$.when() 为多个操作指定回调函数。</p> <p>deferred.then() 方法<br>有时为了省事，可以把 done() 和 fail() 合在一起写，这就是 then() 方法。</p> <pre class="brush:php;toolbar:false">$.when($.ajax( '/main.php' )) 　　 .then(successFunc, failureFunc);</pre> <p>如果 then() 有两个参数，那么第一个参数是 done() 方法的回调函数，第二个参数是 fail() 方法的回调方法。如果 then() 只有一个参数，那么等同于 done()。</p> <p>deferred.always() 方法<br>这个方法也是用来指定回调函数的，它的作用是，不管调用的是 deferred.resolve() 还是 deferred.reject()，最后总是执行。</p> <pre class="brush:php;toolbar:false">$.ajax( 'test.html' )     .always( function() { alert('已执行！');} );</pre> <p>更多信息请参见 jQuery API中文文档。</p> <p>本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的<a href="http://www.php.cn/course/list/17.html" target="_blank">JavaScript视频教程</a>栏目！</p> <p></p>

위 내용은 Jquery에서 지연된 개체 사용 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!