jQuery: Stop window height recalclulation once conditional statement returns false

Question

I have a jQuery function which changes the size of columns if some conditions are met. The function starts working once the window has been resized. But it doesn's stop recalculations once the conditions return false. How it could be solved? Here is a script:

jQuery(document).ready(function ($) {

    element_second = document.getElementsByClassName('second_column')[0];
    element = document.getElementsByClassName('first_column_main_page')[0];


    $(window).on('resize', function(){      
        interval = setInterval(updateHeight,3000);
    });


  function updateHeight(){    

    var $window = $(window);
    var width = $window.width();
    var height = $window.height();
        if (height > 667 && height < 800) {
            interval = setInterval(updateHeight,300);
            console.log('true');
            setInterval(function () {
                if ((width != $window.width()) || (height != $window.height())) {
                    width = $window.width();
                    height = $window.height();

                    element.style.height = ((height - element.offsetTop) + "px");
                    element_second.style.height = ((height - element.offsetTop) + "px");    
                }
            }, 300);
        } 
        else {
            console.log('false');
            clearInterval(interval);        
            element.style.height = (840 + "px");//
            element_second.style.height = (840 + "px");// this part makes all blocks to flash, cause recalculations dosn's stop
        }            
  };            
});

In other words, I need a script to recalculate heights only for specific dimensions.

@Titus answer:

 jQuery(document).ready(function ($) {


    element_second = document.getElementsByClassName('second_column')[0];
    element = document.getElementsByClassName('first_column_main_page')[0];


    $(window).on('resize', function(){      
        updateHeight();
    });


  function updateHeight(){    

        var $window = $(window);
        var width = $window.width();
        var height = $window.height();

        if (height > 667 && height < 800) {

            console.log('true');

{
                width = $window.width();
                height = $window.height();

                element.style.height = ((height - element.offsetTop) + "px");
                element_second.style.height = ((height - element.offsetTop) + "px");    


        } 
        else {
            console.log('false');                   
        }            
  };    

});

You are setting two intervals but only clearing one. Keep a reference to the second interval so you can clear it as well. — Titus, Jul 13 '19 at 12:21
Not really because I don't understand what exactly you are trying do. Most probably the problem is that you're setting a lot of intervals (multiple calls to `setInterval`) but only clearing one of them. Make sure you understand what [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) does because you use it like one will use `setTimeout`. — Titus, Jul 13 '19 at 12:44
Probably, I've made a mistake. I wanted to use `setInterval` as a timer, in order to lower the function calls. Make a pause for a recalculations, once the window has beein resized. — Kuzma, Jul 13 '19 at 12:46
No need for that, the [`resize` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) is triggered after the window has been resized. — Titus, Jul 13 '19 at 12:48
I've edited the question and pasted the simplified code. But now, every time I resize the window only the `console.log('false');` is executed. I've missed something? — Kuzma, Jul 13 '19 at 13:05
That is because you're checking the previous `height` and `width`, you'll need something like `width = $window.width(); height = $window.height();` before the `if` statement. — Titus, Jul 13 '19 at 13:07

score 0 · Accepted Answer · answered Jul 13 '19 at 13:16

@Titus answer:

 jQuery(document).ready(function ($) {


    element_second = document.getElementsByClassName('second_column')[0];
    element = document.getElementsByClassName('first_column_main_page')[0];


    $(window).on('resize', function(){      
        updateHeight();
    });


  function updateHeight(){    

        var $window = $(window);
        var width = $window.width();
        var height = $window.height();

        if (height > 667 && height < 800) {

            console.log('true');

{
                width = $window.width();
                height = $window.height();

                element.style.height = ((height - element.offsetTop) + "px");
                element_second.style.height = ((height - element.offsetTop) + "px");    


        } 
        else {
            console.log('false');                   
        }            
  };    

});

jQuery: Stop window height recalclulation once conditional statement returns false

1 Answers1