jQuery Mousemove и вопрос производительности - PullRequest
Новая
       31

jQuery Mousemove и вопрос производительности

2 голосов
/ 26 сентября 2011

Я только что написал некоторый код (и он работает) для отображения текста рядом с мышью, когда мышь находится на любом из 4 прямоугольников (другой текст для другого прямоугольника). Я использовал HTML-тег , css и jquery. Все отлично работает Мне не нравится использование процессора на 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% процессора, когда вы наводите на него мышь. Вопрос в том, как уменьшить ресурсы, которые нужны, когда вы перемещаете мышь по этой карте. IE наихудший - загрузка процессора увеличивается до 100%. FF ест около 67% -100%. Опера съедает менее 62% (никогда не более 62%). Хром - лучший: средний - около 28%, максимальный - 42%.

Можно размещать текст рядом с мышью не каждую миллисекунду, а каждые 300 миллисекунд, если это помогает сократить требуемые ресурсы. Как это сделать? Есть ли лучшее решение для этой проблемы, чем использовать mouseenter вместо mousemove? Недостатком mouseenter является то, что он не обновляет позицию всплывающего текста, пока не будет вызван mouseleave.

Спасибо.

Ответы [ 3 ]

2 голосов
/ 26 сентября 2011

Вы можете отслеживать время последнего перемещения мыши. 

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;
}
0 голосов
/ 26 сентября 2011

Настройка 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('');
    });
});
0 голосов
/ 26 сентября 2011

Вы можете запустить интервал при наведении мыши и обновить там позицию. Поиграйте с интервалом времени, чтобы найти хорошую частоту. Также может помочь хранение объектов jquery в переменной, но не очень, поскольку вы получаете к ним доступ по идентификатору, который довольно быстрый.

...