javascript - 如何在一个脚本中组合 .with() 和 .resize()

Question

你能帮我解决以下问题吗？我有这个有效的 javascript 代码。对于宽度大于 640 像素的屏幕，此代码使一行中的 Bootstrap 列都具有相同的高度。

if($(window).width() >= 640){
$(document).ready(function () {
  $(".row").each(function () {
    var highestBox = 0;
    $(".col", this).each(function () {
        if ($(this).height() > highestBox) highestBox = $(this).height();
    });
    $(".col", this).height(highestBox);
  });
});
}

问题

问题是，如果我将窗口大小从小于 640 像素调整为大于 640 像素，我必须刷新页面才能看到更改。我想要一个自动检查窗口大小的脚本。我认为 .resize() 函数可以帮助我解决这个问题，但我不知道如何实现它。

Answer 1

您可以按如下方式实现它。将您的代码放在一个函数中，我们称它为 resizeMe() 。然后:

var rtime,
    timeout = false,
    waitingTime = 200,
    resizeFinished = function () {
        if (new Date() - rtime < waitingTime) {
            window.setTimeout(resizeFinished, waitingTime);
        } else {
            timeout = false;
            if ($(window).width() >= 640) {
                resizeMe();
            }
        }
    };

    $(window).resize(function () {
        rtime = new Date();
        if (timeout === false) {
            timeout = true;
            window.setTimeout(resizeFinished, waitingTime);
        }
    }).resize();

使用此函数，您的函数 resizeMe() 仅在调整大小过程完成时被触发。这样可以确保 resizeMe() 不会在每次鼠标移动时触发，而是仅在达到 waitingTime 时触发(200 毫秒)。这对于性能来说非常重要。 (感谢都市指点)