Pourquoi ce callback setTimeout me fait-il une erreur?

Question

Je tente de réduire une div à la demande, mais ma fonction setTimeout n'appelle pas avec succès sa fonction de rappel. Voici le code ci-dessous:

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(); 

et je l'appelle dans le document comme suit:

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

Quand il arrive à la fonction setTimeout au sein this.collapse ... il des erreurs « this.collapse n'est pas une fonction ".

Answer 1

Lorsque les appels de délai d'attente vous avez quitté la fonction et «ceci» ne fait plus référence à ce que vous pensez qu'il fait.

Vous devez utiliser une fermeture, comme ceci:

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

Answer 2

Lorsque le délai d'attente est appelé, this n'est plus ce que vous voulez qu'il soit. Vous devrez vous référer à l'élément DOM que vous voulez par un autre mécanisme, peut-être une récupération par ID.

Answer 3

Le comportement que vous voyez est parce que la question de la portée en JavaScript. JavaScript n'a que deux champs d'application: la fonction et le global. Lorsque vous effectuez un appel setTimeout(), vous devez définir des variables dans la portée globale si vous souhaitez utiliser cet état dans le code exécuté en raison de l'appel de setTimeout(). Ce serait la solution à la question; Greg a déjà suggéré un moyen de le faire.

Vous trouverez plus d'informations dans le Centre pour développeurs Mozilla dans les pages à propos de setTimeout et dans le Core JavaScript Reference.