jQueryイベント単一のハンドラへのバインド

Question

単一のハンドラを持つとプロジェクトを簡略化することができます。これはパフォーマンスに影響しますか？特にマウス移動イベントが呼び出されたとき、条件が多すぎるとパフォーマンスに影響がありますか？

var myHandler = function(e){ 
    if (e.type == 'mousemove'){ 

    } else if (e.type == 'mouseover'){ 

    } else if (e.type == 'mouseout'){ 

    } else if (e.type == 'mousedown'){ 

    } else if (e.type == 'mouseup'){ 

    }   
}; 

$('#Element').bind('mouseover mouseout mousedown mouseup mousemove', myHandler); 

Answer 1

あなたはこれらすべてのイベントを処理する必要がありますし、あなたはイベントが発生していることを周波数によってIF-else文（あなたがすでに持っているように）些細なパフォーマンスペナルティがある、すなわち、せいぜい4短い文字列を注文した場合比較。次のコードは、ベンチマークに固定サイズの10,000,000文字列比較のパフォーマンスをしようとします：ブラウザがしかし、結果は実行の間で変動し、私のPC上の唯一のアプリケーションではありませんので

$(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では100ms（これは10,000,000回の繰り返しであることに注意してください）。

とにかく、複数のイベントを1つの関数にバインドしてもパフォーマンスは低下しませんが、これはプロジェクトを単純化することには本当に疑問です。多くの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]); 
    } 
}); 

Answer 2

パフォーマンスに関するもう一つのノートを（プラスコード可読性）、switchは、else ifsよりも大幅に高速です。あなたはPerformance of if-else, switch or map based conditioning

を見てtajkeすることができ、よりdetialsについて

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

      break; 
     case 'mouseover': 

      break; 
     case 'mouseout': 

      break; 
     case 'mousedown': 

      break; 
     case 'mouseup': 

      break; 
    } 
};