javascript - jQuery resize 事件处理程序，在调整大小之前捕获某个元素的原始宽度和高度

Question

我有以下代码，它可以工作，但我讨厌它:)并且我想做一些更干净的东西。

这个想法是:- 我已经向窗口对象添加了一个调整大小事件处理程序；- 我使用 setTimeout 使我的代码等待用户完成调整大小，此时...doneResizing 函数启动并调用一个方法 - 准确地说是 Canvas.resize() 方法。

我觉得我做错的地方在这里:我需要捕获“canvas”元素的原始宽度和高度，以及调整大小后该 elem 的“宽度”和“高度”。

现在我正在使用全局变量(在另一个作用域中是全局的，没关系)，你知道更好的方法吗？

function doneResizing() {
    if (Canvas.isInitialized()) {
        $timeout(function() {
            var cw = element.width();
            var ch = element.height();
            // Resize the svg.
            $('#canvas svg').width(cw);
            $('#canvas svg').height(ch);
            Canvas.resize(iw, ih, cw, ch, $('#canvas'), $('#canvas svg'));
            iw = null;
            ih = null;
        }, 10);
    }
};

var id;
var iw, ih;
$(window).resize(function(event) {
    clearTimeout(id);
    if (!iw) iw = element.width();
    if (!ih) ih = element.height();
    element.addClass('loading');
    $('#canvas svg').hide();    
    id = setTimeout(doneResizing, 500);    
});

谢谢!

Answer 1

我读到的要求是:

• 您需要在开始调整大小之前记录初始大小，因为一旦开始调整大小，您将无法准确地知道原始大小。
• 您需要忽略多次调整，直到用户停止调整大小，因此时间延迟是合适的，但如果出现另一次调整大小，则需要清除计时器。
• 不需要您的第二次 setTimeout。

您已经完成了大部分工作，因此进行一些调整即可完成:

var id;
// record the initial size
var iw = element.width();
var ih = element.height();

$(window).resize(function (event) {
    clearTimeout(id);
    element.addClass('loading');
    $('#canvas svg').hide();
    id = setTimeout(doneResizing, 500);
});

function doneResizing() {
    if (Canvas.isInitialized()) {
        var cw = element.width();
        var ch = element.height();
        // Resize the svg.
        $('#canvas svg').width(cw);
        $('#canvas svg').height(ch);
        Canvas.resize(iw, ih, cw, ch, $('#canvas'), $('#canvas svg'));
        // Now record the last position as the new start size
        iw = cw;
        ih = ch;
    }
};

您尚未显示提供元素的代码，因此有范围(没有双关语意图)将所有这些放入函数中并在窗口上引用您的全局变量，或在命名空间中(实际上是另一个一次性嵌套包装函数)。