(Translated by Google)
I have a grid with Smart Rendering.
Sometimes, simultaneous Ajax calls to the server occur when the user moves around the grid, dragging the scroll bar rapidly and scrolling up and down repeatedly.
The Ajax calls don’t finish executing, and a second request is already being executed.
How could I control that simultaneous calls don’t occur?
It’s not clear to me what event I should somehow cancel or abort the call.
Hi,
This behavior is kind of expected.
While grid scrolling components request data after the first scrolling attempt (as it results in better UX - showing actual data for a user instead of rendering an empty space), as scroll events appear many times, it results in multiple calls. While good for the user, it may be less beneficial for your backend code. You can intercept the event by using the onDynXLS event:
https://docs.dhtmlx.com/api__dhtmlxgrid_ondynxls_event.html
Returning false from the event handler will block the request. Though just blocking will cause problems as you need to show that data for the user anyway, so instead it may make sense to debounce the request (load latest state, ignore intermediate requests):
let timer = null;
let allow = false;
grid.attachEvent("onDynXLS", function(){
if (allow) return true;
clearTimeout(timer);
timer = setTimeout(() => {
allow = true;
grid.render_dataset();
allow = false;
}, 300);
})
This code will delay all data loading requests for 0.3 seconds and if a new request is issued in that time, it will prolong the delay. You can alter the delay or the above logic for your needs.
I will try to use that idea, thanks