jQuery Deferred 异步控制

理解jQuery的Deferred/Promise异步编程模式 · 难度：高级 · +15XP

jQuery Deferred

Deferred是jQuery的异步编程方案，早于ES6 Promise。

创建Deferred

function asyncTask() {
    var dfd = $.Deferred();
    setTimeout(function() {
        dfd.resolve('成功了');  // 或 dfd.reject('失败');
    }, 1000);
    return dfd.promise();
}

asyncTask()
    .done(function(msg) { console.log(msg); })
    .fail(function(err) { console.error(err); });

$.when() 并行等待

$.when(
    $.get('/api/users'),
    $.get('/api/posts')
).done(function(usersResp, postsResp) {
    var users = usersResp[0];
    var posts = postsResp[0];
    console.log(users, posts);
});

Deferred vs Promise

对比	Deferred	ES6 Promise
	标准	jQuery专有	JS标准
	创建	$.Deferred()	new Promise()
	成功	.resolve()	resolve()
	失败	.reject()	reject()

💡 练习

用Deferred包装setTimeout，然后用$.when并行执行两个延迟任务。