jQuery Mousemove 和性能问题

Question

我刚刚编写了一些代码（并且它有效），用于当鼠标位于 4 个矩形中的任何一个上时在鼠标附近显示一些文本（不同的矩形有不同的文本）。我使用了 html 标签 <地图>> /map>、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。问题是：如何减少在地图上移动鼠标时所需的资源？ 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;
}

Answer 2

您可以在 mouseenter 上开始一个间隔并更新其中的位置。
调整间隔时间以找到合适的频率。
另外，将 jquery 对象存储在变量中可能会有所帮助，但效果不大，因为您通过 ID 访问它们，速度相当快。

Answer 3

设置 html 的成本相当高，您只需要在 mouseenter 上完成即可。将选择器移到循环之外也会给你带来很好的加速。

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