javascript - 如何定义 .done()

Question

我正在尝试实现对延迟done 函数的调用，但找不到实现该功能的方法:

jQuery.fn.imageload=function(src) {
    $this=$(this);
    var img=new Image();
    img.src=src;
    if (img.complete) {done();return;}
    img.onload=done;
    function done() {
        console.log('done');
        $this.empty().append(img);
    }
    return $this;
}

$('div').imageload('http://placehold.it/350x150').done(function() {
    //this not called
    console.log('done loading');
});

http://jsfiddle.net/oceog/m4jvd/

我应该在插件声明中添加什么以在加载图像后调用 .done()？

Answer 1

http://jsfiddle.net/hnhGR/3/

您需要使用 jQuery.Deferred对象。

$(function () {
    $.fn.imageload=function(src) {
        $this=$(this);
        var img=new Image();
        img.src=src;
        var deferred = $.Deferred();
        img.onload = function() {
            deferred.resolve(img); 
        }
        if (img.complete) {
            img.onload();
        }
        deferred.done(function () {
            console.log('done');
            $this.empty().append(img);
            return img;
        });
        return deferred;
    }

    $('#my-div').imageload('http://placehold.it/350x150').done(function(img) {
        console.log('done loading', img);
    });
});

基本上 Deferred 对象有一个 resolve() 方法。当它被触发时，它意味着正在发生的任何异步过程已经完成。触发解析时，将按顺序调用分配有 done() 和 then() 的所有回调。您传递给 resolve() 方法的值会传递给这些回调(在本例中为 img 变量)。