6

同様の方法でいくつかのキーストロークを処理するためにマウストラップJavascript プラグインを使用しようとしているので、次のようにコーディングすることを考えました。

    var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );

    }

しかし、明らかに、i可変です。ただし、応答でイベントパラメーターと競合するクロージャーを作成する方法がわかりません。この状況を処理する方法についての提案はありますか?

4

2 に答える 2

5

応答のイベント パラメータと競合するクロージャを作成する方法

（@dandavisが示したように）ループ本体全体の周りにクロージャーを使用するか、ハンドラーの周りにのみクロージャーを使用します。

…
    Mousetrap.bind(
        [   'command+' + iKey,
            'command+' + iKeyUpper,
            'ctrl+' + iKey,
            'ctrl+' + iKeyUpper],
        (function(_i) { // of course you can use the name `i` again
            return function( e ) {
                console.log( "you clicked: " + _i );
            };
        })(i) // and pass in the to-be-preserved values
    );
于 2013-06-20T16:42:46.743 に答える
4

forループの「i」と同期しないように、i変数をローカルスコープでラップする必要があります。

   var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
      (function(i){
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );
      }(i));
    }

もう 1 つの方法は、機能的な Array メソッドを使用することです。これは、関数を使用するため、常に独自のスコープを持ち、要素の値と要素のインデックスを本質的に提供します。

 var keys = [ 'b', 'i', 'u'];
   keys.map(function(iKey, i){
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            function( e ) {
                console.log( "you clicked: " + i );
        }); // end bind()    

   }); // end map()

2 番目の例は IE9+ でそのまま使用できますが、通常は IE シムに含まれる単純なドロップイン配列メソッド互換パックを使用して、どこでも動作させることができます...

于 2013-06-20T15:57:04.100 に答える