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变量）。

Answer 2

我会做：

jQuery.fn.imageload = function(src) {
    var self = this,
        img = new Image(),
        def = new jQuery.Deferred();

    if (img.complete) {
        def.resolve();
    }
    img.onload = function() {
        console.log('done');
        self.empty().append(img);
        def.resolve(); 
    }
    img.src = src;
    return def.promise();
}

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

Answer 3

我会尝试使用$.Deferred。我想这会起作用：

$.fn.imageload = function(src) {
    $this = this;
    return $.Deferred(function() {
        var self = this,
            img = new Image();
        img.onload = function() {
           $this.empty().append(img);
           self.resolve();
        };
        img.src = src;
    });
}

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

http://jsfiddle.net/k6kuB/