Too heavy mousemove function

[LeMisterV]

Hi,

I just discovered your jquery.approach plugin, and I think it's a really good idea, but I think there's a big problem in it : The mousemove function is way too big, and, as this function is called VERY often (on each mouse move, this can be really really a lot), as soon as it's too big, the animations based on this are not smooth, too much to do for the poor little browser.

I met this kind of problem already, and I found that the best way to deal with this is to have two pieces of code : − The mouseover function, that does just the less possible : register mouse position is generally all you need to do with this function. − Another function called within a certain interval (with window.setInterval for example), that will do everything else.

Why is this better ? Because than You can, for example, choose the interval you want to execute your hard work. If your doing an animation for example, it's useless to have more than about 30 changes / s, because we, humans, can't see more than this. But if you do 1 change on each mousemove, than you'll probably do a lot more than 30 changes a second. Or you'll try, because the browser will probably not be able to deal with that much changes.

Hope this can help you improve your plug−in

Nico

[srobbin]

Hi Nico,

Thanks for the note.

I agree, it would be too taxing to call the approach function on every iteration of mousemove.

In the current version of Approach, I'm doing exactly that: waiting 50ms in between each approach animation. I experimented with various times, and this one seemed to work the best.

That said, the interval isn't exposed as an assignable setting. I should probably make that update.

So, I think we're in agreement. Take a look at the source code and let me know if you were thinking of something else. If so, forking the project and showing me via code is probably the best way convey the point.

Thanks, Scott

[LeMisterV]

Hi,

The way you manage your "interval" is not the best way. Your mousemove function is still very big, and this is very bad for performances.

By the way, you use the animate function inside your mousemove function, and I find this really strange. animate is made to make a time based animation. So using it for a movement based animation is probably not the good way to do.

This is how I see the way your script should work :

You have on one side something that listen for mouse moves, and register the mouse position. On an other side, you have a function that will read the last registered mouse position, get the distance between the html element and the mouse, calculate the good style properties the element should get due to the distance, and than apply the style. This last function must be executed very often to make the changes look like an animation (about 30 changes per second to have a good animation).

Those two function are two different actions, and they must be handled separately. The mousemove check will, of course, be handled with the mousemove event. For the animation, the window.setInterval function should be used. The only link between the two functions is the mouse position registered in a variable.

Now, if you make your script working like this, you don't need to use the jquery animate function anymore. Your function executing every 25ms (for example) will do the animating job.

As I told you on the other issue I posted, I just created a jQuery plugin that implements two new special events : mouseapproach and mouseretreat. Those two events are doing all you need for your script : I listen to the mouse position on one side, and in the other side I check every Xms for the position and, if it has changed the event approach or retreat is triggered.

This way, those events are independent from the mouse move event, and you can manage the refresh rate. Now, you just have to bind whatever function to those events to create your animations.

jquery.distanceListener repository : http://github.com/LeMisterV/jquery-distanceListener

You can find a demo file, and in the wiki some use example.

Regards,

Nico