Jquery Deferred 对比 Promise

javascript处理异步逻辑有多种方式，这里只对比 JQuery的Deferred 和 ES6的Promise。场景是判断网页中所有图片是否加载完（加载异常404也算加载完毕）。

JQuery Deferred 方式

var imgdefereds = [];
$('img').each(function () {
    var dfd = $.Deferred();

    $(this).bind('load', () => dfd.resolve()) //
        .bind('error', () => dfd.resolve());

    if (this.complete)
        dfd.resolve()

    imgdefereds.push(dfd);
});

$.when.apply(null, imgdefereds).done(() => {
    console.info("Jquery Deferred 所有图片加载完");
});

ES6 Promise

let ps = $("img").map((i, dom) => {
    if (dom.complete)
        return Promise.resolve("complete");

    return new Promise((resolve, reject) => {
        $(dom).bind('load', () => resolve("load")) //
            .bind('error', () => resolve("error")) //
    });
});

Promise.all(ps).then(() => {
    console.info("Promise 所有图片加载完成")
})

 

总结：这两种方式整体来说，Promise更简洁，未来的趋势。