javascript - loop - settimeout angular

Llamando a un método de 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 al que quiero llamar 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 parámetro a la función setInterval?

Un intento fue setInterval (''this.showLoading (), 100). Pero no funciona. Este método accede a las propiedades de la 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 tomar una función directamente, no solo una cadena. https://developer.mozilla.org/en/DOM/window.setInterval

es decir

loadingTimer = setInterval(showLoading, 100);

Pero, para una compatibilidad óptima con el navegador, debe usar 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 use argumentos de cadena para establecer Intervalo / Tiempo de espera. Es dudoso de la misma manera que usar eval , y puede fallar de manera similar con las restricciones de seguridad de CSP en el futuro. Así que en vez:

loadingTimer = setInterval(this.showLoading, 100);

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

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

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

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