如何定义.done(）

How to define .done()

本文关键字：done 定义 何定义      更新时间：2023-09-26

我正在尝试实现对已定义的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()？

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

我会这么做：

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');
});

我会尝试使用$.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/

相关文章：