How to combine .with () and .resize () in one script

Question

Can you help me with the following? I have this javascript code. This code makes bootstrap columns of the same height for screens with a width greater than 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);
  });
});
}

Problem

The problem is that if I resize the window from less than 640 pixels to more than 640 pixels, I have to refresh the page to see the changes. I would like the script to automatically check the size of the window. I think the .resize () function can help me with this, but I cannot figure out how to implement it.

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 ). . ( )

Answer 2

, window.matchMedia() ( & polyfill) load/resize

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

EDIT debouncing , @Daenu answer

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

Answer 4

you need to put

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

you can use

 $( window ).resize(function() function

Answer 5

Based on @Daenu's answer. A compressed / simplified version that reuses the same timeout:

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

The idea is that if resizing is performed when there is active timeout, we undo the old one and rewrite the new one

Fiddle: https://jsfiddle.net/hq1jd47v/2/