jQuery resize once

Question

jQuery( window ).resize(function(){
  if ( jQuery( window ).width() < 1199 && jQuery( window ).width() > 991 ) {
     jQuery("body").load(location.href);
     image_scale_height();
     ctitle_scale_height();
  }
});

I wanted to read the code under that range only ONCE but when I resize it within that range, it act like a loop, it always read all within that range.

You could just fire the event after the [resizing ends](https://stackoverflow.com/questions/45905160/javascript-on-window-resize-end) - if you only fire it once, then what happens when your event is done for the wrong screen size and the user continues to resize — Pete, Sep 13 '18 at 16:04
you could check this solution to that issue: https://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/ — DIEGO CARRASCAL, Sep 13 '18 at 16:16

Zakaria Acharki · Answer 1 · 2018-09-13T16:14:05.677

Working fiddle.

You could use a flag variable for this, the flag (reached in my suggestion) is false by default will be true if the condition was reached and when the user resizes out of the range it will be false again that will prevent the redundant, like :

var reached = false;

jQuery( window ).resize(function(){
  if ( jQuery( window ).width() < 1199 && jQuery( window ).width() > 991 ) {
     if( !reached ){
        console.log( 'My action' , reached );
        reached = true;
     }
  }else{
    reached = false;
  }
});

Note: If you want your action to be executed just one time you have just to remove the else clause.

score 0 · Answer 2 · answered Sep 13 '18 at 16:00

Just track it like this:

var resized = false;

jQuery(window).resize(function() {
  if (jQuery(window).width() < 1199 && jQuery(window).width() > 991) {
    if (resized) return; // don't do it twice
    jQuery("body").load(location.href);
    image_scale_height();
    ctitle_scale_height();
    resized = true;
  }
});

score 0 · Answer 3 · answered Sep 13 '18 at 16:09

Either use .one() or .off(). http://api.jquery.com/off/ http://api.jquery.com/one/

For .one(), change function to this -

jQuery( window ).one("resize", function(){ 
  if( jQuery( window ).width() < 1199 && jQuery( window ).width() > 991 ) { 
     jQuery("body").load(location.href); image_scale_height(); ctitle_scale_height(); 
} 
});

But if window is resized once even outside the range, it won't execute again. So I would advise using .off() -

jQuery( window ).resize( function(){ 
  if( jQuery( window ).width() < 1199 && jQuery( window ).width() > 991 ) { 
     jQuery("body").load(location.href); image_scale_height(); ctitle_scale_height(); 
jQuery(window).off("resize");
} 
});

This will remove all resize handlers from window set by jQuery.

score 0 · Accepted Answer · answered Sep 14 '18 at 16:30

You can't use .load() function for the reason every load of the page it will reset the value of reached variable.

var reached = false;

jQuery( window ).resize(function(){
  if ( jQuery( window ).width() < 1199 && jQuery( window ).width() > 991 ) {
     if( !reached ){
        jQuery("body").load(location.href);
        image_scale_height();
        ctitle_scale_height();
        reached = true;
     }
  }else{
    reached = false;
  }
});

instead, for the image_scale_height(); and ctitle_scale_height(); you can just simply reset the height at the css.

You can do this:

CSS

@media (max-width: 1199px) and (min-width: 991px){
  division{
     heigth: auto;
}

Java Script

jQuery( window ).resize(function(){
  if ( jQuery( window ).width() < 1199 && jQuery( window ).width() > 991 ) {
     image_scale_height();
     ctitle_scale_height();
  }
});

jQuery resize once

4 Answers4