なぜこのsetTimeoutコールバックでエラーが出るのですか？

Question

リクエスト時にdivを折りたたんでみようとしていますが、setTimeout関数がコールバック関数を正常に呼び出せません。ここでは以下のコードです：

function newsFeed() { 

    this.delete = function(listingID) { 

     var listing = document.getElementById(listingID); 
     var currHeight = listing.offsetHeight; 

     var confirmDelete = confirm("Are you sure you'd like to delete this listing forever?"); 
     if (confirmDelete) { 
      this.collapse(listingID,currHeight,currHeight,100); 
     } 

    } 

    this.collapse = function(listingID,orig_height,curr_height,opacity) { 
     var listing = document.getElementById(listingID); 
     var reduceBy = 10; 
     if(curr_height > reduceBy) { 
      curr_height = curr_height-reduceBy; 
      listing.style.overflow = "hidden"; 
      listing.style.height = (curr_height-40) + "px"; 

      if(opacity > 0) { 
       opacity = opacity - 10; 
       var opaque = (opacity/100); 

       listing.style.opacity=opaque;      
       listing.style.MozOpacity=opaque;     
       listing.style.filter='alpha(opacity='+opacity+')'; 
      } 

      setTimeout("this.collapse('"+listingID+"',"+orig_height+","+curr_height+","+opacity+")",1); 
     } 
    } 
} 

var newsFeed = new newsFeed(); 

は、次のように私は、文書でそれを呼び出す：

<div id="closeMe"> 
    <a onclick="newsFeed.delete('closeMe');">close this div</a> 
</div> 

それはthis.collapse内setTimeout関数になると...それエラー「this.collapse関数ではありません "。

Answer 1

タイムアウトが呼び出されて関数を終了すると、「this」はもはやあなたが思うものを参照しなくなります。

あなたはこのような閉鎖、使用する必要があります。

var self = this; 
setTimeout(function() 
{ 
    self.collapse(listingID, orig_height, curr_height, opacity); 
}, 1); 

Answer 2

タイムアウトが呼び出されると、thisは不要になります。他のメカニズム、おそらくIDベースの検索によって、必要なDOM要素を参照する必要があります。

Answer 3

をあなたが見ている行動は、JavaScriptであるためスコープの問題です。 JavaScriptには、functionとglobalという2つのスコープしかありません。

setTimeout（）呼び出しを実行するときに、setTimeout（）呼び出しのために実行されたコードでその状態を使用する場合は、グローバルスコープで変数を設定する必要があります。これは問題の修正となるだろう。グレッグは既にこれを行う方法を提案しています。

詳細については、Mozilla Developer CenterのsetTimeoutおよびCore JavaScript Referenceのページを参照してください。