jquery遅延オブジェクトの使用例-jsチュートリアル-php.cn

今回は jquery 遅延オブジェクトの使用例をお届けします。 jquery 遅延オブジェクトを使用する際の注意点は実際的なものです。

私の技術レベルには限界がありますので、間違いがあればご指摘ください。

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");
  })
})

ログイン後にコピー

次に、追加ボタンをクリックすると、span 要素が追加され、色が赤に変わることがわかります。次に、コード内の異質なもの、つまり、イベント追加関数の最初の var dfd = new $.Deferred(); と dfd.resolve()、および最後の dfd.done(function(){ $(") を調べました。スパン").css("色","赤");})。

今日の紹介の焦点は、JQ の遅延オブジェクトです。いわゆる遅延とは、将来の特定の期間に実行できることを意味します。上記のコードの処理の流れを見てみましょう。上記のコードでは、新しく作成した遅延オブジェクトの dfd.done() メソッドを呼び出し、クリック時に呼び出される匿名の関数式をパラメーターの位置として渡します。イベント処理関数 dfd.resolve() が実行され、その後、 dfd.done() で記述した匿名関数が実行されます。このプロセスでは、dfd が、resolve の位置に関数を配置していることがわかります。 dfd は遅延オブジェクトであり、関数の実行順序を変更できることは明らかです。

上記のコードをよく考えてみると、色を変更するコードを関数内に配置しており、クリックしたときにこの関数を呼び出すことができます。書くのが面倒なので鳥がいる。実際、遅延オブジェクトの最も一般的な使用法は AJAX です。上記のコードでは、[追加] をクリックした後、[削除] をクリックしてから [追加] をクリックしますが、このとき単語が赤にならないのは、状態が変化した後に遅延オブジェクトが無効になるためです。率直に言って、それは1回限りの使用です。

遅延オブジェクトの使用

JQ は通常、遅延オブジェクトの機能を Deferred または Promise と呼びますが、正確に言えば、Promise は Deferred から派生したサブクラスです。

これを使用するときは、まず遅延オブジェクトを作成します: var dfd = new $.Deferred()。

遅延オブジェクト dfd には、pending、resolved、rejected の 3 つの状態があります。このときの状態は、dfd オブジェクトの state メソッド dfd.state() を使用して確認できます。

dfd が作成された後、そのステータスは保留中になります。resolve メソッド: dfd.resolve() を呼び出した後、そのステータスは解決済みになり、dfd が拒否メソッドを呼び出した後、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の関数が実行されます。

dfd のすべてのメソッドは遅延オブジェクトを返すため、done、fail、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)});
})

ログイン後にコピー

最初の関数は要素を追加し、2 番目の関数は要素の色を変更します。追加された要素。

　　无论什么时候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中文网其它相关文章！