0

@FlorianMargaineが提案したように（JavaScriptチャットの会話で）コードをリファクタリングした後、次のようなものが得られました。

body.addEventListener( 'mousedown', action1);
function action1(){
    //Start selecting event
    body.addEventListener( 'mousemove', selectOver);
}
function selectOver(e){
    //after the user has selected and done a mouse up event show a box:
    body.addEventListener( 'mouseup', showBox );
}
function showBox(e){
    //Show box
    box.addEventListener( 'click', actionAlert('clicked on interface after selected text') );
}
function actionAlert(d){
    alert(d);
}

主な問題は、途中で多くのCPUを使用していると思うことですが、どうすればそれを最小限に抑えることができますか？イベントハンドラーを削除する機能について少し読みましたが、それが解決策ですか？そのソリューションをコードに効率的に統合するにはどうすればよいですか？

4

2 に答える 2

3

（ 「addEventListener」を使用する場合、これは正しくありませんが、歴史的な好奇心としてここに残しておきます:)「 action1」イベントハンドラーは、呼び出されるたびに「mousemove」ハンドラーを再バインドします。次に、そのハンドラーは「mouseup」の新しいハンドラーをバインドします。しばらくすると、何百もの冗長ハンドラーが作成されます。

したがって、教訓は次のとおりです。他のイベントハンドラー内にイベントハンドラーをバインドしないでください（本当に正当な理由がない限り）。（編集—申し訳ありません。上記で書いたように、それはすべて正しくないことが指摘されています。私はjQueryでハンドラーをバインドすることに慣れており、そのライブラリは同じように動作しません。）

また、「showBox」関数は、記述されているように、戻り値のない「actionAlert」メソッドを呼び出した結果をバインドします。私はあなたが欲しいものは次のとおりだと思います：

box.addEventListener( 'click', function() {
  actionAlert('clicked on interface after selected text');
});
于 2012-06-11T15:44:14.250 に答える
2

mouseupごとにイベントリスナーを追加したり、マウスダウンするたびにマウスムーブを再mousemove登録したりしないでください。代わりに、次のようにします。

body.addEventListener( 'mousedown', action1, false);
function action1(){
    //Start selecting event
    body.addEventListener( 'mousemove', selectOver, false);
    body.addEventListener( 'mouseup', showBox, false );
    body.addEventListener( 'mouseup', function(){
      body.removeEventListener( 'mousemove', selectOver, false );
    });
}
function selectOver(e){
    // Not sure what this function is for.
}
function actionAlert(d){
    alert(d);
}

また、Firefoxの一部の（すべて？）バージョンで必要とされるように、明示的な3番目のパラメーターfalseを追加しました。addEventListener

于 2012-06-11T15:44:42.917 に答える