如何在一个脚本中结合 .with() 和 .resize()答案

【问题标题】：How to combine .with() and .resize() in one script如何在一个脚本中结合 .with() 和 .resize()
【发布时间】：2016-01-30 10:16:27
【问题描述】：

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

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() 函数可以帮助我解决这个问题，但我不知道如何实现它。

【问题讨论】：

如果对您有帮助，您最终会接受答案吗？

标签： javascript jquery twitter-bootstrap-3

【解决方案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）。这对性能非常重要。（感谢城市指点）

【讨论】：

这也会在某些浏览器上保留 CPU，这些浏览器会在鼠标移动时过于频繁地触发 resize 事件

【解决方案2】：

您可以使用以下 sn-p，在 load/resize 窗口事件中使用 window.matchMedia() (support & polyfill) 方法和绑定处理程序：

$(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中添加关于好点的去抖动

【讨论】：

【解决方案3】：

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

function resizeMe(){
 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);
   });
 });
 }
}

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

window.addEventListener("resize", resizeMe);

【讨论】：

【解决方案4】：

你需要把

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

你可以使用

 $( window ).resize(function() function

【讨论】：

【解决方案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/

【讨论】：