Question

我有以下代码，它有效，但我讨厌它:)我想要做一些更清洁的东西。

这个想法是： - 我在窗口对象中添加了一个resize事件处理程序; - 我使用setTimeout让我的代码等待用户完成大小调整，当... doneResizing函数启动并调用方法 - Canvas.resize（）方法准确。

我觉得我做错了就在这里： 我需要捕捉＆＃34;画布＆＃34;的原始宽度和高度。元素和宽度＆＃34;和＆＃34;身高＆＃34;调整大小后的那个元素。

现在我正在使用全局变量（另一个范围内的全局变量无关紧要），你知道一种更好的方法吗？

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

你没有显示提供element的代码，因此有一个范围（没有双关语）将所有这些放在一个函数中并在window或命名空间中引用你的全局变量（真的是另一个一次性嵌套包装函数。）

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

1 个答案: