I'm running the following code and i'm not able to find a better solution to run mutiple setTimeouts without causing performance issues. I have an array with 102 records, the application is lagging for about 5 seconds and works finely after launching functions.
const animateMarker = React.useCallback(() => {
let delay = 0;
if (props.routes.coordinates[0]) {
props.route.coordinates.slice(1).map((point: Point, index) => {
const idTimeout = setTimeout(() => {
if (busRef.current) {
busRef.current.animatedMoveTo(
{
lat: point.lat,
lon: point.lon,
},
10000,
);
}
}, delay);
setTimeOuts(prevTimeOuts => [...prevTimeOuts, idTimeout]);
delay += 10000;
});
}
}, [props.routes]);
const clearAllTimeouts = React.useCallback(() => {
timeouts.map(timeout => {
clearTimeout(timeout);
});
setTimeOuts([]);
}, [timeouts]);
React.useEffect(() => {
animateMarker();
return () => {
clearAllTimeouts();
};
}, [animateMarker]);
I'm looking for any solution or suggestions I read something something about using threads, is there any solution for this sort of problem Should i look to something else like threads or something ? should i change map functions to something like for loop ? is it better to launch setTimeouts in the same time ? or seperate them with slice like for exmaple calling the first 30 records with slice and the others after that
