2

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

这是一个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 之前它不会更新弹出文本的位置。

谢谢你。

4

3 回答 3

2

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

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;
}
于 2011-09-26T07:06:39.147 回答
0

您可以在 mouseenter 上开始一个间隔并更新其中的位置。玩弄间隔时间以找到一个好的频率。还将 jquery 对象存储在一个变量中可能会有所帮助，但不会有多大帮助，因为您通过 ID 访问它们非常快。

于 2011-09-26T07:04:21.503 回答
0

设置 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('');
    });
});
于 2011-09-26T07:05:19.363 回答