How would you debounce the response of a timeslider?

Question

Currently, when you move the timeslider reactiveutils.watch()  picks up every individual movement (e.g. it would register every year between 1850 and 1900) along the timeslider. Its potentially too many responses, if you want to do something like setting a definition expression using the slider value. I only want to get the ending time extent once the I've released the mouse button. Thanks!

UndralBatsukh · Accepted Answer

Hi there,

You could listen to the pointer-up event on the timeSlider div to achieve what you are trying to do. Here is a codepen showing how it is done. https://codepen.io/U_B_U/pen/abMJdaL?editors=1000

The following is the how you can do it.

document.getElementById("timeSlider").addEventListener("pointerup",(event) => {
  console.log("here is your time extent", timeSlider.timeExtent);
});

You could also debounce when watching timeExtent using  the debounce function technique mentioned in this article: JavaScript Debounce Function (davidwalsh.name)

Hope this helps,

-Undral