Question

I’ve just wrote some code (and it works) for displaying some text near the mouse when the mouse is on any of 4 rectangles (different text for different rectangle). I used html tag < map >< /map>, css and jquery. Everything works fine. I don’t like 100% CPU Usage when mouse is moving on the picture.

This is a jquery part:

$('area').each(function(){
    var area = $(this),
        alt = area.attr('alt');
    area.mousemove(function(event){
        var tPosX = event.pageX +10; 
        var tPosY = event.pageY - 85;
        $('#rectangletext').css({top: tPosY, left: tPosX});
        $('#rectangletext').html(alt);
    }).mouseleave(function(){
        $('#rectangletext').html('');
    });
});

I’ve tested it in IE, FF, Chrome and Opera (at the same time, on the same computer). Area.mousemove eats up to 100% CPU when you move your mouse on that . The question is: how to reduce resources that are needed when you move your mouse on that map? IE is the worst – CPU Usage jumps up to 100%. FF eats about 67%-100%. Opera eats less than 62% (never more than 62%). Chrome is the best: average is about 28%, maximum is 42%.

It’s OK to reposition text to be near the mouse not every millisecond, but every 300 milliseconds, if it helps to reduce the resources that are required. How to do that?
Any better solution for this problem than to use mouseenter instead of mousemove? The cons of mouseenter is it doesn’t update the position of the popup text until mouseleave is called.

Thank you.

Answer 1

You can keep track of the time your mouse last moved.

var prevDate; // keep this as a global variable 

// put the following inside the mousemove function
var date = new Date().getTime();
if(date - prevDate > 300){
    // your code goes here
    prevDate = date;
}