Jquery: How to Call Resize Event Only Once It's Finished Resizing

JQuery: How to call RESIZE event only once it's FINISHED resizing?

Here is an example using thejh's instructions

You can store a reference id to any setInterval or setTimeout. Like this:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

How to wait for the 'end' of 'resize' event and only then perform an action?

I had luck with the following recommendation: http://forum.jquery.com/topic/the-resizeend-event

Here's the code so you don't have to dig through his post's link & source:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

Thanks sime.vidas for the code!

How to call javascript function only once during window resize event?

As you are using jQuery anyway, have a look at Ben Alman's doTimeout plugin. You can use it to debounce your event handler.

There is even an example that matches exactly your case:

$(window).resize(function(){
  $.doTimeout( 'resize', 250, function(){
    // do something computationally expensive
  });
});

The key here is that, the function passed to doTimeout is only executed if the resize handler is not called (i.e. the resize event is not fired) again during the next 250 ms. If so, the timer is aborted and a new one is started.

Fire resize event once on size down and once on size up

A simple solution is to use a 'flag'. In this case, I'm using a class to the html element

FIDDLE

$(window).on('resize', function() {
    if ((!$('html').hasClass('small')) && ($(window).width() < 650)) {
        $('#output').text('small');
        $('html').addClass('small').removeClass('large');
    }
    else if ((!$('html').hasClass('large')) && ($(window).width() > 650)) {
        $('#output').text('large');
        $('html').addClass('large').removeClass('small');
    }
});

Of course, you could keep create a variable to store the status of the page (large vs small).
This example might be more 'visually' easier to understand.

Here's an example with a variable instead of a class.

Window Resize issue in jQuery when I resize window one time, it gives me 2

Why it triggers twice

This answers your question: Why does the jQuery resize event fire twice?

I added a fiddle that confirms it triggers twice on scale down in chrome, once on scale up.In Edge it triggers once on both scale up and down.

var x=0;

$(window).resize(function()
{
  console.log(x +=1);
});        

Fiddle

How to make it trigger once

var x = 0,
    y = 0;
$(window).resize(function() {
    clearTimeout(y);
    y = setTimeout(finishedRezise, 100);
});

function finishedRezise(){
  console.log(x += 1);  
}

Fiddle

The javascript function SetTimeout() prevents the function from being executed by a specified number of milliseconds. clearTimeout() clears the timer from SetTimout() and takes the returned value from setTimeout() as parameter, and it needs to be defined globally. See W3Schools documentation W3School

jQuery(window).resize function trigger only once not every single pixel

The browser won't do that for you. You'll have to keep the resize event handler, and keep the previous width in a variable. Then compare the current with with the previous one.

Something like this:

var previousWidth = jQuery(window).width();
jQuery(window).resize(function(){
    var currentWidth = jQuery(window).width();
    var threshold = 771;

    if (previousWidth < threshold && currentWidth >= threshold)
        console.log(">");

    if (previousWidth >= threshold && currentWidth < threshold)
        console.log("<");

    previousWidth = currentWidth;
});

How do I make the javascript resize event handler happen only after the user stops resizing the window?

Adeneo posted a nice functional example, but I'm partial to building it all into my own handler:

var resizeComplete = (function() {
  var funcs = [];
  var timer ;
  var delay = 250;

  window.onresize = function() {
    window.clearTimeout(timer);

    timer = window.setTimeout(function() {
      for (var i = 0; i < funcs.length; i++) {
        funcs[i](); // Call the func
      }
    }, delay);

  };

  function register(func) {
    funcs.push(func);
  }

  return {
    register: register
  }
}());

resizeComplete.register(function() {
  console.log("Resize complete");
});

How to trigger the window resize event in JavaScript?

Where possible, I prefer to call the function rather than dispatch an event. This works well if you have control over the code you want to run, but see below for cases where you don't own the code.

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

In this example, you can call the doALoadOfStuff function without dispatching an event.

In your modern browsers, you can trigger the event using:

window.dispatchEvent(new Event('resize'));

This doesn't work in Internet Explorer, where you'll have to do the longhand:

var resizeEvent = window.document.createEvent('UIEvents'); 
resizeEvent.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(resizeEvent);

jQuery has the trigger method, which works like this:

$(window).trigger('resize');

And has the caveat:

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

You can also simulate events on a specific element...

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}

---

Related Topics