JavaScriptの可変スコープAddEventListner

Question

コンテキストのために、ビデオトラッキングのためのomniture（adobe）sitecatalystのプラグインを作成しています。プラグインをsitecatalyst形式で書き込む前に、そのプラグインが動作していることを確認したいと思います。私は同じコードをテストしていますが、jQueryを使用しています.jQueryが変数/スコープをどのように処理するかは問題ありません。しかし、Javascriptを使って直接行うのはもう少し難しいことが分かります。

負荷で

var vsa = new Array(); 
var vp = new Array(); 
vsa = document.getElementsByTagName('video'); 
if(vsa.length>0){ 
for(var vvv=0;vvv<vsa.length;vvv++) { 
    vsa[vvv].addEventListener('seeked',function() { if(vp[vsa[vvv].id]) { s.Media.play(vsa[vvv].id,vsa[vvv].currentTime); }},false); 
    vsa[vvv].addEventListener('seeking',function() { if(vp[vsa[vvv].id]) { s.Media.play(vsa[vvv].id,vsa[vvv].currentTime); }},false); 
    vsa[vvv].addEventListener('play',function() { 
     if(!vp[vsa[vvv].id]) { 
      vp[vsa[vvv].id] = true; 
      s.Media.open(vsa[vvv].id,vsa[vvv].duration,s.Media.playerName); 
      s.Media.play(vsa[vvv].id,vsa[vvv].currentTime); 
     } else { 
      s.Media.play(vsa[vvv].id,vsa[vvv].currentTime); 
     }},false); 
    vsa[vvv].addEventListener('pause',function() { if(vp[vsa[vvv].id]) { s.Media.stop(vsa[vvv].id,vsa[vvv].currentTime); }},false); 
    vsa[vvv].addEventListener('ended',function() { vp[vsa[vvv].id] = false; s.Media.stop(vsa[vvv].id,vsa[vvv].currentTime); s.Media.close(vsa[vvv].id); },false); 

    if (typeof vsa[vvv].error != 'undefined' && vsa[vvv].error) { 
     var scvt_msg = 'Error Not Captured'; 
     if(typeof vsa[vvv].error.code != 'undefined') { 
      switch (vsa[vvv].error.code) { 
       case MEDIA_ERR_ABORTED: 
        scvt_msg = 'vsa[vvv]eo stopped before load.'; 
        break; 
       case MEDIA_ERR_NETWORK: 
        scvt_msg = 'Network error'; 
        break; 
       case MEDIA_ERR_DECODE: 
        scvt_msg = 'vsa[vvv]eo is broken'; 
        break; 
       case MEDIA_ERR_SRC_NOT_SUPPORTED: 
        scvt_msg = 'Codec is unsupported by this browser'; 
        break; 
      } 
     } 
     s.tl(this,'o','video: ' + scvt_msg); 
    } 

} 
} 

は、（イベントリスナーが正しく取り付けされているという意味）エラーがない：私が午前のはここです。ビデオの再生を押すと、「vsa [vvv] is undefined」と表示されます。

if(!vp[vsa[vvv].id]) 

でイベントリスナー関数からアクセスできるVSA、VP、およびSの「グローバル」VARSを得るためにどのように任意のアイデアを開始したコードの行に？

ありがとうございました！

Answer 1

変数にアクセスできます。問題は、あなたがループトラップのために（非常に一般的な）クロージャーの中に落ちたことです。

基本的に、すべてのイベントリスナーは同じvvv変数を共有しています。イベントリスナーが実行されるまでに、vvvはすべてのループを通過してvsa.lengthに設定され、vsa [vvv]は未定義になります。これを確認するには、console.log(vvv)のイベントリスナーへの呼び出しを追加してください。

これは、ループ外の関数にイベントリスナーを作成して、各イベントリスナーがビデオタグ変数を参照するようにすることです。ところで

function addMyEvents(node){ 
    //the inner functions here get their own separate version of "node" 
    // instead of sharing the vvv 
    node.addEventListener('seeked',function() { if(vp[node.id]) { s.Media.play(node.id, node.currentTime); }},false); 
    node.addEventListener('seeking',function() { if(vp[node.id]) { s.Media.play(node.id, node.currentTime); }},false); 
    //... 
} 

for(var vvv=0;vvv<vsa.length;vvv++) { 
    addMyEvents(vsa[vvv]); 
} 

ループは文句を言わないで実行するので長さがとにかくゼロであれば、あなたは将来的にこのエラーをaboidするには...初めに

---

をif(vsa.length)テストは必要ありません。 JSHintやJSLintのようなリンターを通してコードを実行してください。 forループ内に関数を作成すると警告が表示されます。