javascript - equalHeight 调整大小以进行响应

Question

我有一个相等高度的代码。将列设置为相同的高度。但我使用了窗口调整大小。该脚本仅适用于台式机和平板电脑，而不适用于移动设备。我有这个脚本。该脚本正在运行，但我怎样才能使该脚本更好？因为我现在使用了两次相同的功能。

我怎样才能让它变得更好？

var viewportWidth = $(window).width();
if ((viewportWidth >= 760)) {
    setTimeout(function() {
        equalHeight($('#footer .column'));
    }, 250);
};
$(window).resize(function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
});

Answer 1

您可以定义自定义函数并在需要时调用它：

function changeWidth() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
}

$(document).ready(function() {
    changeWidth();
    $(window).resize(function() {
        changeWidth();
    });
});

Answer 2

试试这个方法

$(document).ready(function() {
    resizeFunction();

    $(window).resize(function() {
        resizeFunction();
    });
});

var resizeFunction = new function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
}

Answer 3

您可以通过触发这样的事件来避免重复resize：

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
})
.trigger('resize');