Question

你能帮我解决以下问题吗？我有这个工作的JavaScript代码。对于宽度大于640px的屏幕，此代码使得行中的引导列的高度相等。

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

问题

问题是，如果我将窗口的大小从小于640px调整到大于640px，我必须刷新页面才能看到更改。我喜欢自动检查窗口大小的脚本。我认为.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时才会被触发（200ms）。这对性能非常重要。（感谢城市指点）

Answer 2

您可以在load/resize窗口事件中使用window.matchMedia()（support ＆amp; polyfill）方法和绑定处理程序使用以下代码段：< / p>

$(window).on('load resize', function() {
  clearTimeout(this.resizeTimeout);
  this.resizeTimeout = setTimeout(function() {
    if (window.matchMedia("(min-width: 640px)").matches) {
      $(".row").each(function() {
        var highestBox = Math.max.apply(null, $(this).find('.box').map(function() {
          return this.clientHeight; // or $(this).height()
        }));
        $(this).find('.box').height(highestBox);
      });
    }
  }, 50);
});

编辑在@Daenu's answer

中添加有关优点的去抖动

Answer 3

只需创建一个函数并将其传递给窗口

window.addEventListener("resize", resizeMe);

然后将一个事件附加到窗口并传递您的函数

String android_id = Settings.Secure.getString(getContext().getContentResolver(),
                    Settings.Secure.ANDROID_ID);

Answer 4

你需要把

$(document).ready(function () on the top before the if($(window).width() >= 640)

你可以使用

 $( window ).resize(function() function

Answer 5

基于@Daenu的回答。重用相同超时的压缩/简化版本：

$(function(){
    timeout = null
    waitingTime = 200


    $(window).resize(function(){
        // Clear old timeout
        if (timeout)
            clearTimeout(timeout)
        // Set new
        timeout = setTimeout(resizeMe, waitingTime);
    })
})

function resizeMe(){
    $(".row").each(function () {
        var highestBox = 0;
        $(".col", this).each(function () {
            if ($(this).height() > highestBox) highestBox = $(this).height();
        });
        $(".col", this).height(highestBox);
    });
}

我们的想法是，如果在有效timeout时触发调整大小，我们会取消旧版并重新安排新版

小提琴：https://jsfiddle.net/hq1jd47v/2/

如何在一个脚本中组合.with（）和.resize（）

5 个答案: