css-element-queries

css-element-queries copied to clipboard

Hi,

would be great if there would be a setting where a latency / timeframe can be defined so when making e.g. AJAX requests they are done after this timeframe of no change in size. If the framne is 50ms all actions on the resize event happens only if there is no resize for 50ms ... especially useful when manually resizing a container.

Can you describe in other words please? I honestly didn't understand what your use-case/requirement is.

Thanks for answering ... the use case would be that I have to make a request to a server when a container resizes ... during resizing it's the problem that the request is made on every pixel-change ... so when resizing from 100 to 200 px there are 200 calls made ... It would be a great feature if there would be a latency where you can set the milliseconds where there is no change in size ... Example: if there is no change in size for longer than 50ms after restarting the resize event - it's done, so I can make the Ajax request and not on every pixel change.

Do you know what I mean?

I see, but I'd rather see that feature outside of this library. What you need is basically a debounce.

For example this library: https://github.com/component/debounce

Example:

import { debounce } from "debounce";
new ResizeSensor(debounce(() => {
    console.log('This is now called max 1 times per second, no matter how many times you resize me');
}, 1000));

Ok, thought it would be a great feature to configure within your library var element = document.getElementById('myElement'); new ResizeSensor(element, debounceValueInMS, function() { console.log('Changed to ' + element.clientWidth); });

Actually, we could do it and per default debounce to 100ms or so to increase performance. I'll keep that issue open 👍

Bump+1