この記事では、jQuery ソース コードの非同期メカニズムの分析を主に紹介します。これには、特定の参考値があります。必要な友人は、それを参照してください。
ノンブロッキング
ソリューション、Deferred
を提供します。 非阻塞
解决方案: Deferred
。
认识异步
alert(1) setTimeout(function(){ alert(2) },0) alert(3) //alert(1) //alert(3) //alert(2)
deferred
对象开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据)
,也有同步的操作(比如遍历一个大型数组)
,它们都不是立即能得到结果的。
通常的做法是,为它们指定回调函数(callback)
。即事先规定,一旦它们运行结束,应该调用哪些函数。
deferred
对象是在jquery 1.5版本被引进来的,jquery在回调方面的出处理不是很好,为此就诞生了deferred对象了。deferred
对象就是jQuery
的回调函数解决方案。在英语中,defer
的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。
最开始写法是:
// < 1.5 $.ajax({ url: "test.html", success: function(){ alert("哈哈,成功了!"); }, error:function(){ alert("出错啦!"); } });
如果jquery
的版本是1.5
以下的,那么返回的是XHR对象
,所以没法链式操作,但是高于1.5的版本的话,返回的是Deferred
对象,可以进行链式操作。
// >=1.5 $.ajax("test.html") .done(function(){ }) .fail(function(){ })
done()相当于success方法,fail()相当于error方法。采用链式写法以后,代码的可读性大大提高。
deferred对象的一大好处,就是它允许你自由添加多个回调函数。
还是以上面的代码为例,如果ajax操作成功后,除了原来的回调函数,我还想再运行一个回调函数,怎么办?
$.ajax("test.html") .done(function(){ alert("哈哈,成功了!");} ) .fail(function(){ alert("出错啦!"); } ) .done(function(){ alert("第二个回调函数!");} );
deferred对象的另一大好处,就是它允许你为多个事件指定一个回调函数,这是传统写法做不到的。那就是$.when()
$.when($.ajax("test1.html"), $.ajax("test2.html")) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); }); //$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。
它把这一套回调函数接口,从ajax操作扩展到了所有操作。也就是说,任何一个操作----不管是ajax操作还是本地操作,也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法,指定回调函数。
// 一个耗时操作 var wait = function(){ var task = function(){ alert('执行了'); }; setTimeout(5000); }
我们为其添加回调,可能会想到$.when();
$.when(wait()) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); });
但是没起到效果,done立即执行,原因是$.when()接受的是一个deferred对象。所以我们进一步改进吧
var dtd = $.Deferred(); var wait = function(){ var task = function(){ alert('执行了'); dtd.resolve(); // 改变deferred对象的执行状态 }; setTimeout(task, 5000); return dd; }
这样wait()返回的是一个defferred对象了,这就可以上链式操作了。
$.when(wait()) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); });
deferred采用的是Promise的原理。这里我们要清楚一个执行状态的概念。在defferred对象中,有着三种状态,未完成
已完成
已失败
如果执行状态是"已完成"
(resolved),deferred对象立刻调用done()方法
指定的回调函数;
如果执行状态是"已失败"
,调用fail()
方法指定的回调函数;
如果执行状态是"未完成"
,则继续等待,或者调用progress()
方法指定的回调函数(jQuery1.7版本添加)。
defferred.resolve()
是将状态从未完成
变为已完成
。 ==> done()defferred.reject()
是将状态从未完成
变为了已失败
非同期について理解する
var dtd = $.Deferred(); // 新建一个Deferred对象 var wait = function(){ var tasks = function(){ alert("执行完毕!"); dtd.resolve(); // 改变Deferred对象的执行状态 }; setTimeout(tasks,5000); return dtd; // 返回promise对象 }; $.when(wait()) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); }); dtd.resolve();// 这里会立即先执行一次
deferred
オブジェクトを理解する Web サイトの開発プロセスでは、長時間かかる特定の JavaScript 操作に遭遇することがよくあります。その中には、非同期操作 (サーバー データの読み取りなど)
と同期操作 (大きな配列の走査など)
があり、どちらもすぐに結果を取得できません。 。
通常のアプローチは、コールバック関数 (callback)
を指定することです。つまり、実行終了後にどの関数を呼び出すかを事前に指定します。
deferred
オブジェクトは jquery バージョン 1.5 で導入されました。jquery はコールバックの処理があまり得意ではないため、deferred オブジェクトが生まれました。deferred
オブジェクトは、jQuery
のコールバック関数ソリューションです。英語では、defer
は「遅延」を意味するため、遅延オブジェクトの意味は、将来の特定の時点まで実行を「遅らせる」ことです。
最初の記述は次のとおりです:
var wait = function(dtd){ var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象 var tasks = function(){ alert("执行完毕!"); dtd.resolve(); // 改变Deferred对象的执行状态 }; setTimeout(tasks,5000); return dtd.promise(); // 返回promise对象 }; var dd = wait(); // dd.resolve(); // 这里如果使用了的话,就会报错的哦,因为返回deferred.promise()是无法对状态修改的哦 $.when(dd) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); });
jquery
のバージョンが 1.5
以下の場合、戻り値は XHRオブジェクト
であるため、チェーン操作はできませんが、1.5 より高いバージョンでは、Deferred
オブジェクトが返され、チェーン操作が可能です。 var dtd = $.Deferred(); // 新建一个Deferred对象 var wait = function(dtd){ var tasks = function(){ alert("执行完毕!"); dtd.resolve(); // 改变Deferred对象的执行状态 }; setTimeout(tasks,5000); return dtd; }; var ddd = wait(); // dd.resolve(); //这里报错了哦 $.Deferred(dd) .done(function(){ alert("哈哈,成功了!"); }) .fail(function(){ alert("出错啦!"); });
3. 同じ操作に対して複数のコールバック関数を指定する
上記のコードを例にとると、ajax 操作が成功した後、元のコールバック関数に加えて、別のコールバック関数も実行したい場合、どうすればよいですか?
$.when($.ajax( "/main.php" )) .then(successFunc, failureFunc );
$.ajax( "test.html" ) .always( function() { alert("已执行!");} );
function pop(arg) { if (!arg) { console.error('pop title is empty'); } var dfd = $.Deferred() //实例化一个延迟对象 , confirmed //记录按下确定或取消 , $confirm = $content.find('button.confirm') //确认按钮 , $cancel = $content.find('button.cancel'); //取消按钮 //定时器轮询,当按下确定或取消时触发删除或取消操作 timer = setInterval(function() { if (confirmed !== undifined) { dfd.resolve(confirmed); clearInterval(timer); dismiss_pop(); } }, 50); //点击确定时更改confirmed状态 $confirm.on('click', function() { confirmed = true; }); //点击取消时更改confirmed状态 $cancel.on('click', function() { confirmed = false; }); //返回dfd对象 return dfd.promise(); } $('.delete').click(function() { var $this = $(this); var index = $this.data('index'); //当前的id //确定删除 pop('确定删除?').then(function(res) { res ? delete_task(index) : null; }) })
Uncompleted
Completed
Failed
の 3 つの状態があります。🎜🎜実行ステータスが "Completed"
の場合>(解決済み)、遅延オブジェクトは、done() メソッド
で指定されたコールバック関数をすぐに呼び出します。"Failed"
の場合、fail() メソッドで指定されたコールバック関数。"Unfinished"
の場合は、待機し続けるか、progress()メソッドで指定されたコールバック関数 (jQuery 1.7 バージョンで追加)。 🎜🎜<code>deferred.resolve()
はステータスを Uncompleted
から Completed
に変更します。 ==>done()deferred.reject()
はステータスを Incomplete
から Failed
に変更します。 ==>fail()🎜rrreee🎜7. defferred.promise();🎜🎜例えば、dtd はグローバル変数なので、いつでも外部からアクセスできます。 ) または failed() が複数回実行されます。 🎜🎜これは明らかに私たちが望んでいることではないので、 defferred.promise の助けが必要です。 🎜🎜 その機能は、元の遅延オブジェクトに別の遅延オブジェクトを返すことです。後者は、実行ステータスの変更に関連しないメソッド (done() メソッドやfail() メソッドなど) のみを開き、それに関連するメソッドをブロックします。メソッド(resolve()メソッドやreject()メソッドなど)を変更して、実行ステータスを変更できないようにします。 🎜rrreee🎜8. $.Deferred(wait)🎜🎜実行ステータスの変更を防ぐ別の方法は、$.Deferred()を使用することです🎜rrreee🎜9. 遅延オブジェクトの概要🎜🎜🎜$.Deferred()は遅延オブジェクトを生成します。 🎜🎜🎜🎜deferred.done() は、操作が成功したときのコールバック関数を指定します🎜
deferred.fail() 指定操作失败时的回调函数
deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变;接受参数时,作用为在参数对象上部署deferred接口。
deferred.resolve(args) 手动改变deferred对象的运行状态为"已完成",从而立即触发done()方法。解决Deferred(延迟)对象,并根据给定的args参数调用任何完成回调函数(doneCallbacks)。
deferred.resolveWith() 解决Deferred(延迟)对象,并根据给定的 context和args参数调用任何完成回调函数(doneCallbacks)。
deferred.reject(args) 这个方法与deferred.resolve()正好相反,调用后将deferred对象的运行状态变为"已失败",从而立即触发fail()方法。拒绝Deferred(延迟)对象,并根据给定的args参数调用任何失败回调函数(failCallbacks)。这里的args是一个对象。
deferred.rejectWith(context, args) 拒绝Deferred(延迟)对象,并根据给定的 context和args参数调用任何失败回调函数(failCallbacks)。这里的args是一个数组类型。
$.when() 为多个操作指定回调函数。除了这些方法以外,deferred对象还有二个重要方法,上面的教程中没有涉及到。Context(上下文) 作为 this对象传递给失败回调函数(failCallbacks )
deferred.then()
有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。
$.when($.ajax( "/main.php" )) .then(successFunc, failureFunc );
如果then()有两个参数,那么第一个参数是done()方法的回调函数,第二个参数是fail()方法的回调方法。如果then()只有一个参数,那么等同于done()。
deferred.always() 这个方法也是用来指定回调函数的,它的作用是,不管调用的 deferred.resolve()
还`是deferred.reject(),最后总是执行。
$.ajax( "test.html" ) .always( function() { alert("已执行!");} );
deferred.state() 确定一个Deferred(延迟)对象的当前状态。
"pending": Deferred对象是尚未完成状态 (不是 "rejected" 或 "resolved").
"resolved": Deferred对象是在解决状态,这意味着,deferred.resolve() 或者 deferred.resolveWith()被对象访问和doneCallbacks被访问(或在被调用的过程中)
"rejected": Deferred对象是在被拒绝的状态,这意味着,deferred.reject() 或者 deferred.rejectWith() 被对象访问和failCallbacks被访问(或在被调用的过程中) 。
这种方法主要是用在调试,例如,在准备拒绝(reject)一个延迟对象前,判断它是否已经处于 resolved 状态。
情景1:当用户按下删除弹窗的确定或取消后,把弹窗隐藏,并执行对应的操作(删除或不执行),因为我们不知道用户什么时候会点击按钮,所以不能让弹窗阻塞其他任务的执行。
function pop(arg) { if (!arg) { console.error('pop title is empty'); } var dfd = $.Deferred() //实例化一个延迟对象 , confirmed //记录按下确定或取消 , $confirm = $content.find('button.confirm') //确认按钮 , $cancel = $content.find('button.cancel'); //取消按钮 //定时器轮询,当按下确定或取消时触发删除或取消操作 timer = setInterval(function() { if (confirmed !== undifined) { dfd.resolve(confirmed); clearInterval(timer); dismiss_pop(); } }, 50); //点击确定时更改confirmed状态 $confirm.on('click', function() { confirmed = true; }); //点击取消时更改confirmed状态 $cancel.on('click', function() { confirmed = false; }); //返回dfd对象 return dfd.promise(); } $('.delete').click(function() { var $this = $(this); var index = $this.data('index'); //当前的id //确定删除 pop('确定删除?').then(function(res) { res ? delete_task(index) : null; }) })
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上がjQueryソースコードの非同期機構の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。