I was wondering whether it's possible to jump to and handle the latest event, when you have several other events of the same type in the event loop in Javascript. I'm asking this because, I have made a Javascript program, which reports the 'mousemove' event every time the mouse pointer moves. The issue is that, for some reason, the event handling is not as fast as it should be, and my PC or code certainly isn't the problem.
I think that the issue is that web browsers limit the amount of 'mousemove' events that can be handled every frame. So, instead of handling all the events in a queue, I would like to just jump to the latest one and handle it and discard all the older events, instead of executing all of them one-by-one.
I'm not sure whether this is possible with Javascript, so that's why I'm asking for help.
Any help would be much appreciated... :-)
Here is my app. The problem is that if you try to move the window's title bar area up or down too fast, you will then lose the handle on the window itself. Now, that shouldn't happen in a modern GUI.
UPDATE on 'Debouncing' answer:
So, some people suggested that I should use a debouncing function. That wouldn't solve my problem. At its best, it would only delay what needs to be done. So, for example, if I have a pixel at (4,0) and if I then try to move it 3 pixels to the left, to (1,0), it would appear that in the normal fashion, but just a bit delayed. That is, if one assumes that (I'm making this up) a new 'mousemove' event on the queue is handled every 1 ms and the time it takes for the code to run for this example, is 0 ms, and in the code, we set the function with the code to execute 2 ms after the new event has been handled. This will then mean that indeed, only the latest event will be handled and the code will then run 2 ms after the latest event's listener function has started to run. So, to move a pixel 3 pixels to the left, this will still take 5 ms. That is still too slow. I actually need to update my Web app with coordinates of the mouse pointer, from where it actually is.
My solution:
Every time a 'mousemove' event's listener has started to execute, I should take the coordinates from the mouse pointer, but not from the event's .clientX and .clientY properties. I should take them from where they actually are on the page and not from where they were, once the 'mousemove' event has been registered and the event object that has been created at that time (which also doesn't have the up-to-date coordinates of the mouse pointer). I've searched for a solution on how to get the actual mouse pointer's coordinates without the actual event object, but so far, I have only read the responses about it being impossible.
This person has had the exact same problem as me. I'm now recording the global (the document's) position of the mouse, but the behavior of the app is still the same.
My solution to this problem:
I have moved the 'mousemove' and 'mouseup' events from the dragged object to the document itself.