jquery 지연 객체 사용 사례

이번에는 jquery deferred object 사용 사례를 가져오겠습니다. jquery deferred object 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

제 기술 수준은 일반적으로 제한되어 있습니다. 실수가 있으면 정정해 주세요.

　ES6는 이미 지연된 개체 Promise를 구현했지만 오늘 주인공은 JQ의 지연된 개체이며 루틴은 실제로 동일합니다.

<button id="add">add</button><button id="remove">remove</button>
<p id="content"></p>

$(function(){
  var dfd = new $.Deferred();
  var add = $("#add");
  var remove = $("#remove");
  var content = $("#content");
  add.click(function(){
    var span = $("<span>我是点击按钮创建的元素</span>");
    $("span").length==0&&$("body").append(span);
    dfd.resolve();
  })
  remove.click(function(){
    var span = $("span");
    span&&span.remove();
  })
  dfd.done(function(){
    $("span").css("color","red");
  })
})

이제 함수에 집중해 보면 추가 버튼을 클릭하면 범위 요소가 추가되고 색상이 빨간색으로 바뀌는 것을 볼 수 있습니다. 그런 다음 코드에서 이질적인 내용을 살펴보았습니다. 시작 부분은 var dfd = new $.Deferred()이고 dfd.resolve()는 추가 이벤트 함수입니다. 범위").css("색상","빨간색");}).

　$.Deferred()는 오늘 소개의 초점입니다. JQ의 지연 객체는 소위 지연이라는 의미로 미래의 특정 기간에 실행될 수 있다는 의미입니다. 위 코드의 처리 흐름을 살펴보겠습니다. 위 코드에서는 새로 생성된 지연 객체의 dfd.done() 메서드를 호출하고 클릭 시 호출되는 익명의 함수 표현식을 매개변수 위치로 전달합니다. 이벤트 처리 함수가 실행되면 dfd.done()에 작성한 anonymous function이 실행됩니다. 이 과정에서 dfd가 해당 함수를 Resolve 위치에 배치하는 것을 볼 수 있습니다. dfd는 지연 객체로, 함수의 실행 순서를 분명히 변경할 수 있습니다.

위의 코드를 잘 생각해보면 유용하다는 것을 알 수 있을 것입니다. color를 변경하는 코드를 함수에 넣어두면 바로 이 함수를 클릭할 수 있습니다. 쓰기가 너무 귀찮습니다. 실제로 지연된 객체의 가장 일반적인 용도는 AJAX입니다. 위의 코드에서는 add를 클릭한 후, add를 클릭한 후 이번에는 단어가 빨간색으로 바뀌지 않는 것을 발견했습니다. 이는 상태가 변경된 후에는 지연 개체가 무효화되기 때문입니다. 솔직히 말해서 일회용입니다.

Using deferred object

JQ는 우리를 위해 deferred 또는 Promise라고 부르는데, 정확히 말하면 Promise는 Deferred에서 파생된 하위 클래스입니다.

　 이를 사용할 때 먼저 지연된 개체를 만듭니다: var dfd = new $.Deferred().

　 지연된 객체 dfd에는 보류, 해결, 거부의 세 가지 상태가 있습니다. 이때 dfd 객체의 상태 메서드인 dfd.state()를 사용하여 상태를 확인할 수 있습니다.

　dfd가 생성된 후 해당 상태는 확인 메서드 dfd.resolve()를 호출한 후 dfd.done()의 함수가 실행됩니다. dfd .reject()는 상태를 거부됨으로 변경한 다음 dfd.fail()에서 메서드를 실행하고, 보류 중에서 해결됨 또는 거부됨으로 변경된 후에도 dfd 객체는 변경되지 않습니다. 이것이 바로 위에서 설명한 코드입니다. 첫 번째 클릭 후에는 빨간색만 표시됩니다.

시작 코드를 살펴보겠습니다. dfd.done()은 실행할 함수를 클릭한 후 dfd의 상태가 다음과 같이 변경됩니다. 해결 보류 중입니다. 완료 상태에서 메서드를 실행하면 색상이 빨간색으로 변합니다.

　매개변수는 dfd.resolve()와 dfd.done() 사이에서 전달될 수 있습니다. 이제 시작 코드를 일부 수정합니다.

//done里面的修改如下
dfd.done(function(color){$("span").css("color",color)})
//点击事件的处理函数修改如下
dfd.resolve("green");

　클릭하면 글꼴 색상이 녹색으로 변경됩니다.

　 또한 dfd에는 Always라는 또 다른 기능이 있습니다: dfd.always(). Always의 기능은 dfd의 상태가 보류 중으로 변경될 때마다 실행됩니다.

　dfd의 모든 메소드는 지연 객체를 반환하므로 여러 개의 done, failure 및 Always가 있을 수 있으며 체인 호출로 직접 작성할 수 있습니다:

dfd.done(function(){}).done( function(){}).fail(function(){});

dfd의 여러 API를 작성할 수 있으며 이때 실행 순서가 보장될 수 있는지 고려할 수 있습니다. dfd의 함수 실행 순서는 전혀 문제가 되지 않으며 우리가 작성한 순서대로 실행될 것이므로 안심하셔도 됩니다. 아래 코드를 보세요:

dfd.done(function(){
  var span = $("<span>我是点击按钮创建的元素</span>");
  $("span").length==0&&$("body").append(span);
})
.done(function(color){
  $("span").css("color",color)});
})

첫 번째 함수는 요소를 추가하고, 두 번째 함수는 요소의 색상을 변경합니다. 추가된 요소.

　　无论什么时候dfd三个API里面的函数都会在dfd的状态从pending变化之后才能执行，在异步的情况下如此，在同步的情况下也是。更确切的说dfd在调用dfd.resolve()之后已经执行过的done的里面的函数会立即执行，对于dfd.resolve()后面的done来说当程序走到它那时才会执行：

var dfd = new $.Deferred();
dfd.done(function(){console.log(1)});
dfd.done(function(){console.log(2)});
console.log("resolve before");
dfd.resolve();
console.log("resolve after");
dfd.done(function(){console.log(3)});
//resolve before,1,2,resolve after,3

延迟对象示例

　　最开始我们使用JQ的AJAX的时候我们通常的写法是：

$.ajax({
 url:"x/y",
 type:"post",
 data:"{...}",
 contentType:"application/json; charset=utf-8",
 success:function(){},
 error:function(){}
})

　　在1.5(好像是这个版本~)之后AJAX会返回一个Promise对象，继而我们可以写成下面这种：

$.ajax({
 url:"x/y",
 type:"post",
 data:"{...}",
 contentType:"application/json; charset=utf-8",
}).done(function(){})
.fail(function(){})

　　看起来更骚气了一点，而且这我们还可以在加多个.done(function(){})，每个done处理不同的事情这样看起来比较清晰。

　　已经知道延迟对象可以改变代码的执行顺序，假如我们又下面的代码：

$.ajax({
 url:"取数据",
 type:"post",
 contentType:"xxx"
}).done(function(data){
  $.ajax({
    url:"利用data取数据",
    data:data,
    type:"post",
    contentType:"xxxx"
  }).done(function(data){
    use data to _do sth...
  })
})

　　我们会发现嵌套的有点多了，我们就可以利用延迟对象让他看起来更加好看一点：

var dfd = new $.Deferred();
$.ajax({
 url:"取数据",
 type:"post",
 contentType:"xxx"
}).done(function(data){
  dfd.resolve(data);
})
dfd.done(function(data){
  $.ajax({
    url:"利用data取数据",
    data:data,
    type:"post",
    contentType:"xxxx"
  }).done(function(data){
    use data to _do sth...
  })
})

　　没有延迟对象我们一样能完成需要的功能，此时我们就需要一层一层嵌套我们处理过程了，而有了延迟对象我们就可以避免这种事了，他可以轻松控制代码的执行顺序，让代码看起来更请清晰。你可能会说我封装函数在合适的地方调不就行了，如果自己看自己写的代码没问题，但是换一个人他的滚动条可能就一直上上下下了。

　　延迟对象的里一个作用就是可以合并AJAX的调用，比如一个接口取数据A另一个接口取数据B，AB都取到之后我们在利用这些数据做一些喜欢做的事，我们就可以利用延迟对象轻松实现。此时我们就可以利用JQ的$.when()来实现。$.when()就跟他的名字一样-当什么的时候-，他的参数可以是Promise对象，也可以是字符串（很少遇到不在介绍），他的返回结果也是一个Promise对象，下面看一个小例子： 

  var allData = {};
  var dataA = $.ajax({
    url:"获取A的URL",
    type:"post",
  }).done(function(data){
    allData.a = data;
  });
  var dataB = $.ajax({
    url:"获取B的URL",
    type:"post",
  }).done(function(data){
    allData.b = data;
  });
  $.when(dataA,dataB).done(function(){
    use allData to _do sth...
  });

　　allData是保存所有数据的一个集合，dataA是第一个AJAX返回的Promise对象，dataB是第二个。$.when()的done方法执行的唯一条件就是dataA和dataB都执行成功。

　　补充：dfd还有一对组合就是notify+progress当dfd对象的状态处于pending时可以调用dfd.nothfy(),调用之后dfd.progress()里面的函数会执行，只要dfd处于pending状态dfd.notify()就可以一直调用，同样也可以传递参数。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery版本升级有哪些注意事项 

jQuery插件封装步骤详解

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