Llamar a un método prototipo de clase por un evento setInterval

Question

Tengo una clase javascript simple.

Un método de esta clase configura un temporizador utilizando la función setInterval. El método que deseo invocar cada vez que se desencadena el evento se define dentro de la misma clase.

La pregunta es, ¿cómo puedo pasar este método como un parámetro para la función setInterval?

Un intento fue setInterval ('this.showLoading(), 100). Pero no funciona. Este método tiene acceso a las propiedades de clase, por lo que necesito la referencia 'this'.

Este es el código de ejemplo:

function LoadingPicture(Id) 
    { 
     this.imgArray = null; 
     this.currentImg = 0; 
     this.elementId = Id; 
     this.loadingTimer = null; 
    } 


    LoadingPicture.prototype.showLoading = function() 
    { 
     if(this.currentImg == imgArray.length) 
      currentImg = 0; 

     document.getElementById(this.elementId).src = imgArray[this.currentImg++].src; 
    } 


    LoadingPicture.prototype.StartLoading = function() 
    { 
     document.getElementById(this.elementId).style.visibility = "visible"; 
     loadingTimer = setInterval("showLoading()", 100); 
    } 

Answer 1

setInterval puede tener una función directamente, no sólo una cadena. https://developer.mozilla.org/en/DOM/window.setInterval

es decir

loadingTimer = setInterval(showLoading, 100); 

Pero, para una óptima compatibilidad del navegador, se debe utilizar un cierre con una referencia explícita:

var t = this; 
loadingTimer = setInterval(function(){t.showLoading();}, 100); 

Answer 2

loadingTimer = setInterval("this.showLoading()", 100); 

En primer lugar, no utilice argumentos de cadena de setInterval/Timeout. Es dudoso de la misma manera que usa eval, y de manera similar puede fallar con restricciones de seguridad CSP en el futuro. Así que en lugar:

loadingTimer = setInterval(this.showLoading, 100); 

Sin embargo, como usted dice, esto va a perder la referencia propietario por lo que la función llamada no verá la derecha this. En el futuro (la recién definida ECMAScript quinta edición), usted será capaz de unirse a la función a su propietario con function.bind:

loadingTimer = setInterval(this.showLoading.bind(this), 100); 

y si aplicar function.bind mismo para los navegadores que aún no lo tienen (vea la parte inferior de this answer), puede usar esta sintaxis hoy.

De lo contrario, tendrá que utilizar un cierre explícito, como en el ejemplo del lingüista de computadora que acaba de publicar.