たsetIntervalとプロトタイプエラー

Question

：

Uncaught TypeError: Cannot read property '1' of undefined 
setTimeout.elementsCollection.style.position shake.js:66 

ライン66は以下のとおりです。

this.elementsCollection[ i ].style.left = parseInt(Math.random() * 20) + 'px'; 

そして完全なコード：

Shake.prototype.shakeEffect = function(){ 
     if(this.elementsCollection.length != false){ 
       var positions = this.shakePosition.split('|'); 
       for(var i = 0; i < this.elementsCollection.length; ++i){ 
        this.elementsCollection[ i ].style.position = 'relative'; 
        this.effectInterval = setInterval(function(elementsCollection) { 
          for(var x = 0; x < positions.length; ++x){ 
            switch(positions[ x ]){ 
              case 'left': 
               this.elementsCollection[ i ].style.left = -Math.abs(Math.random() * 20) + 'px'; 
               break; 
              case 'right': 
               this.elementsCollection[ i ].style.left = parseInt(Math.random() * 20) + 'px'; 
               break; 
              case 'top': 
              case 'up': 
               this.elementsCollection[ i ].style.top = -Math.abs(Math.random() * 20) + 'px'; 
               break; 
              case 'down': 
               this.elementsCollection[ i ].style.top = parseInt(Math.random() * 20) + 'px'; 
               break; 
            } 
          } 
        } , this.getInterval()); 
        setTimeout(function(){ 
          return function(){ 
            clearInterval(this.effectInterval); 
            this.elementsCollection[ i ].style.position = null; 
          } 
        } , this.getTimeout()); 
       } 
     } 
} 

ありがとう！

Answer 1

setTimeout/setIntervalコールバックはオブジェクトとは異なるコンテキストで実行され、実行時にthisキーワードはオブジェクトを参照しません。
インスタンスを参照する変数を作成し、コールバックで代わりのthisを使用：this.effectIntervalコールバックが実行されると

// ... code 
var self = this; 
setTimeout(function(){ 
    return function(){ 
     clearInterval(self.effectInterval); 
     self.elementsCollection[ i ].style.position = null; 
    } 
} , this.getTimeout()); 
// ... code 

は、i値は常にループの最後の値です。
自身のために試してみてください。

for(var i=0;i<10;i++) 
    setTimeout(function(){console.log(i);},10); 

期待通りのループが終了し、変数iがループ上限の値を持っているされた後、関数が実行されるため、結果は、ありません。
のsetTimeout /たsetIntervalためcabbackのfunctinに変数を渡すための正しい方法のようなものです：

function mySetTimeout(args,callback,time){ 
    return setTimeout(function(){ 
     callback.apply({},args); 
    },time); 
}; 

、その後、あなたはそれが好きで使用することができます：

for(var i=0;i<10;i++) 
    mySetTimeout([i],function(i){console.log(i);},10); 

をので、あなたは特別なmySetTimeoutを使用している場合同じコードmySetIntervalの場合、問題のコードは次のように書き換えることができます。

this.effectInterval = mySetInterval([i] function(i) { 
    for(var x = 0; x < positions.length; ++x){ 
      switch(positions[ x ]){ 
        case 'left': 
         self.elementsCollection[ i ].style.left = -Math.abs(Math.random() * 20) + 'px'; 
         break; 
        case 'right': 
         self.elementsCollection[ i ].style.left = parseInt(Math.random() * 20) + 'px'; 
         break; 
        case 'top': 
        case 'up': 
         self.elementsCollection[ i ].style.top = -Math.abs(Math.random() * 20) + 'px'; 
         break; 
        case 'down': 
         self.elementsCollection[ i ].style.top = parseInt(Math.random() * 20) + 'px'; 
         break; 
      } 
    } 
} , this.getInterval()); 

Answer 2

いくつかのこと、setIntervalの関数でパラメータを送信することはできません。

this.effectInterval = setInterval(function(elementsCollection) { 
         for(var x = 0; x < positions.length; ++x){ 
           switch(positions[ x ]){ 
             case 'left': 
              elementsCollection[ i ].style.left = -Math.abs(Math.random() * 20) + 'px'; 
              break; 
             case 'right': 
              elementsCollection[ i ].style.left = parseInt(Math.random() * 20) + 'px'; 
              break; 
             case 'top': 
             case 'up': 
              elementsCollection[ i ].style.top = -Math.abs(Math.random() * 20) + 'px'; 
              break; 
             case 'down': 
              elementsCollection[ i ].style.top = parseInt(Math.random() * 20) + 'px'; 
              break; 
           } 
         } 
       } , this.getInterval(), this.elementsCollection); 
       setTimeout(function(elementsCollection){ 
         return function(){ 
           clearInterval(this.effectInterval); 
           elementsCollection[ i ].style.position = null; 
         } 
       } , this.getTimeout(), this.elementsCollection);