How to prevent jumps on movement of object by onMouseMove?

Question

_{This has might been answered but can't find any positive results on search.}

Having a script to move elements around using various extra calculations beyond the "normal" x,y positioning.

I'm not using JQuery or any other libraries, but here is a sample on the core: >> fiddle <<

The issue at hand is that when moving the element it sometimes does not update, as in: when pointer is moved the element stand still, then a big jump come along.

This, for some reason happens most often when moving slowly. (Perhaps it does it all the time but on fast movements it isn't as noticeable.)

I see this effect when doing plain move to x,y as well, but not quite as often.

Question is what causes this and hopefully how to fix.

I have tried to add a check on time as in if last mousemove-event was e.g. 10 ms ago do nothing. Not any better.

Have also tried to put the positioning of the element in a timeout as in:

setTimeout(function(){
    element.style.left = x + 'px';
    element.style.top  = y + 'px';
}, 0);

to let the browser do other work, but not any better.

This is most noticeable in Mozilla Firefox of the browsers I have tested. Opera is definitively the smoothest.

---

EDIT:

Added a simple

 console.log('1');

And I notice that when the movement hangs the log also hangs (does not log).

It is as in 446 events, lag, 447 events.

So it has to stand somewhere in the region of event not triggered or similar.

---

EDIT:

@kenansulayman:

To clarify. I do not use the setTimeout() – I tested with it, also using 0,1,2,3,5,10,15,...,500+, with no better results:

I also have tested by using this:

On mouse down start this:

Drag.int = 0;
Drag.eint = setInterval(function(){Drag.int++}, 1); /* 1 being variable. */

And on move add console.log(Drag.eint) – when lag/stop of movement happens – Drag.int increases by 1. There is never a gap. As in:

447
448
449 <-- lag, movement stop, aprox 1-1.5 seconds
450
451

Not if I include the setTimeout() either with say timeout of 10 or 20.

If I'm totally missing the point – please let me know.

Answer 1

There's no way to work-around client-side lag situations. However, I propose a simple interpolation of the ]x|y[ coordinates.

That is, you can do the following:

1. initiate an interval capturing cached ]x|y[ coordinates (by 2.)
2. initiate an interval capturing the ]x|y[ coordinates.

Now test the recent k captured coordinates for outliers (which applies to a case where a jump (lag) occurs) and interpolate the jump.

Advanced proposal:

Whereas n be the degree of the interpolation. Typically for your application a value between ]4|7[ is appropriate.

As for the outlier detection, I suggest using the basic Grubbs' test for outliers or the Stahel-Donoho Outlyingness.