Question

我有以下功能：

/* **************************** */
// GET REAL DIMENSIONS OF ELEMENT
/* **************************** */
$.fn.getRealDimensions = function (outer) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .appendTo('body');        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();

    return result;
}

此函数返回页面上元素的尺寸。但是，我对此的调用运行速度比函数可以运行的速度快，并且“尺寸”未正确设置。我的电话是：

dimensions = $('#backgroundCroppingDiv').getRealDimensions();
myWidth = dimensions.width; // myWidth INCORRECT BECAUSE FNC HASN'T FINISHED

我想实现一个'回调'函数，以便在'getRealDimensions'函数完成并计算尺寸之前不会设置myWidth。

我尝试了以下内容：

/* **************************** */
// GET REAL DIMENSIONS OF ELEMENT
/* **************************** */
$.fn.getRealDimensions = function (outer, callback) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .appendTo('body');        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();

    if (typeof(callback) == 'function') {
    callback(result);
    }
    //return result;
}

然后用它来调用它：

dimensions = $('#backgroundCroppingDiv').getRealDimensions( function() {
    myWidth = dimensions.width;
});

但无济于事......

有谁知道如何实现我需要的功能？

谢谢： - ）

Answer 1

您将result作为参数传递给您需要接受它的回调函数。根据您的代码，这是一个例子。

$('#backgroundCroppingDiv').getRealDimensions( function(dimensions ) {
    myWidth = dimensions.width;
});

Answer 2

更改为：

$.fn.getRealDimensions = function (outer,dimensions) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .appendTo('body');        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();

    dimensions=result;
}

并使用.done()调用回调：

var dimensions;
$('#backgroundCroppingDiv').getRealDimensions(outer,dimensions).done(function() {
    myWidth = dimensions.width;
});

Answer 3

由于发布了两个答案，因此对其进行了管理。我把它拼凑在一起似乎有效。

/* **************************** */
// GET REAL DIMENSIONS OF ELEMENT
/* **************************** */
$.fn.getRealDimensions = function (outer, callback) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .appendTo('body');        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();

    if (typeof(callback) == 'function') {
    callback(result);
    }
    //return result;
}

然后我称之为：

$('#backgroundCroppingDiv').getRealDimensions( null, function(dimensions) {
    myWidth = dimensions.width;
});

非常感谢所有的帮助。

如何向函数添加回调

3 个答案: