How to detect the mouseup at the end of a window resize?

Question

I'm looking for a way to detect the mouseup event at the very end of a window resizing (when done by dragging). (AFAICT, this event is not picked up by a resize handler on $(window) or on $(document).)

PS: for my purposes it is OK to define a "drag-resize" as the resizing that takes place between a mousedown (on a suitable resizing locus on the window) and its corresponding mouseup event, disregarding any pauses the user may make, while still holding down the mouse button, between those two end points.

Thirtyeight

IE has a resizeEnd() event but you'll need something more cross-browser. The current best practice I believe is to wait for the browser to "stop resizing", as in "you have your mouse down but haven't done anything with it for x amount of time." When that time expires, you can raise an event. See here for examples: #5490446 – Besides

Four years, and no one has an answer? Anyone? Anyone? Bueller? – Legality

Answer 1

$ npm install resizeend

or add to your page:

<script src="https://raw.githubusercontent.com/jeremenichelli/resizeend/master/dist/resizeend.min.js"></script>

and then just use the event:

window.addEventListener('resizeend', function() {
    alert('You are not resizing the window anymore!');
});

Nisa

Answer 2

I wasn't able to get something 100%well-working. But it kind of works. The plan was to check for a certain pixel per ms(here I check for the middle of the resize, in the beginnig and the end the resize is usually under 1.5) and then set a timer but the browser isn't acourate enough and only fires like 8 times a resize.

let resizeTimer;
let w = 0;
let ww = 100;
let t = new Date();
t=t.getTime();
let tt = new Date();
let d = 0;
let ms = 0;

window.onresize = function(){
    ww = w;
    w = window.innerWidth
    d=w<ww?ww-w:w-ww;
    tt = new Date();
    tt = tt.getTime();
    ms= tt-t;
    t=tt;
    console.log(d/ms)
    if(d/ms>1.5){clearTimeout(resizeTimer);
    resizeTimer= setTimeout(function(){console.log("trigger")}, 210);
    }
};

minified version:

var a,b=0,c=100,d=new Date;d=d.getTime();var e=new Date,f=0,g=0;window.onresize=function(){c=b;b=window.innerWidth;f=b<c?c-b:b-c;e=new Date;e=e.getTime();g=e-d;d=e;1.5>f/g&&(clearTimeout(a),a=setTimeout(function(){console.log("trigger")},210))};

Wellmeaning