jQuery Mousemove 和性能问题

Question

我刚刚编写了一些代码(并且它有效)，用于当鼠标位于 4 个矩形中的任何一个上时在鼠标附近显示一些文本(不同的矩形有不同的文本)。我使用了html标签、css和jquery。一切正常。我不喜欢鼠标在图片上移动时 CPU 使用率达到 100%。

这是 jquery 部分:

$('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('');
    });
});

我已经在 IE、FF、Chrome 和 Opera 中测试了它(同时，在同一台计算机上)。当您将鼠标移动到该区域时，Area.mousemove 会占用高达 100% 的 CPU。问题是:如何减少在 map 上移动鼠标时所需的资源？ IE 是最差的 - CPU 使用率跃升至 100%。 FF大概吃掉了67%-100%。 Opera 的进食率低于 62%(从不超过 62%)。 Chrome 是最好的:平均约为 28%，最高为 42%。

如果有助于减少所需的资源，可以每隔 300 毫秒将文本重新定位到鼠标附近，而不是每毫秒一次。怎么做？对于这个问题，除了使用 mouseenter 而不是 mousemove 之外，还有什么更好的解决方案吗？ mouseenter 的缺点是在调用 mouseleave 之前它不会更新弹出文本的位置。

谢谢。

Answer 1

您可以跟踪鼠标上次移动的时间。

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;
}