Привязка события jQuery к одному обработчику - PullRequest
Новая
       7

Привязка события jQuery к одному обработчику

1 голос
/ 28 декабря 2011

Я столкнулся с ситуацией, когда наличие одного обработчика помогает упростить проект.Влияет ли это на производительность?Особенно, когда вызывается событие перемещения мыши, слишком много условий влияют на производительность?

Ответы [ 2 ]

0 голосов
/ 17 июня 2016

Еще одно замечание относительно производительности (плюс читаемость кода), switch значительно быстрее, чем else if с.

var myHandler = function(e){
    switch(e.type){
        case 'mousemove':

            break;
        case 'mouseover':

            break;
        case 'mouseout':

            break;
        case 'mousedown':

            break;
        case 'mouseup':

            break;
    }
};

Для получения более подробной информации вы можете взглянуть на Производительность условий if-else, switch или map

0 голосов
/ 28 декабря 2011

Если вам нужно обработать все эти события, и вы упорядочиваете операторы if-else по частоте запуска событий (как у вас уже есть), это приводит к незначительному снижению производительности, т. Е. Не более 4 сравнений коротких строк.Следующий код пытается измерить производительность 10 000 000 сравнений строк фиксированного размера: 

$(function (){
Function.prototype.benchmark = function(name, times, args){

var iteration;
var start = new Date();
for (iteration=0; iteration<times; iteration++) {
        var result = this.apply(this, args);
}

var end = new Date();

alert(name + " : " + (end-start));
}
 function test(args){
     return args[0] == "thisistest";
 }
function overhead(args){
 }
test.benchmark("string comparison", 10000000,["thisistesT"]);
//run same without the string comparison
overhead.benchmark("overhead", 10000000,["thisistesT"]);
});

Поскольку браузер - не единственное приложение на моем ПК, результаты могут отличаться в зависимости от исполнения, однако я очень редко получал результатыв Chrome менее 100 мс (помните, что это 10 000 000 итераций).

В любом случае, хотя ваша производительность не пострадает от привязки нескольких событий к одной функции, я действительно сомневаюсь, что это упростит ваш проект.Наличие множества операторов if-else обычно считается плохой практикой и недостатком проекта.

Если вы сделаете это так, чтобы вы могли делить состояние между обработчиками, располагая их в общем объеме функции, вам лучшевыключено что-то вроде: 

$(function (){
  var elementSelector = "#Element";
  var i = 0; //shared
  var events = {
    mouseover : function(){alert("mouseOver " + elementSelector + i++);},
    mouseout : function(){alert("mouseOut " + elementSelector  + i++);}
    // define the rest of the event handlers...
  };

  var $target = $(elementSelector);
  for(var k in events){
     $target.bind(k, events[k]);
  }
});
...