2

マウスが4つの長方形のいずれかにあるときにマウスの近くにテキストを表示するためのコードをいくつか書きました（そして動作します）（長方形ごとに異なるテキスト）。HTML タグ < map >< /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% です。

必要なリソースを減らすのに役立つ場合は、1 ミリ秒ごとではなく 300 ミリ秒ごとにテキストをマウスの近くに再配置しても問題ありません。どうやってするか？mousemove の代わりに mouseenter を使用するよりも、この問題に対するより良い解決策はありますか? 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 に答える