Вызов метода прототипа класса с помощью события setInterval

У меня есть простой класс javascript.

Один метод этого класса устанавливает таймер, используя функцию setInterval. Метод, который я хочу вызывать каждый раз, когда срабатывает событие, определяется внутри одного класса.

Вопрос в том, как передать этот метод в качестве параметра функции setInterval?

Одна попытка была установленаInterval ('this.showLoading(), 100). Но не работает. Этот метод свойств класса доступа, поэтому мне нужна ссылка 'this'.

Это пример кода:

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

Ответ 1

setInterval может принимать функцию напрямую, а не только строку. https://developer.mozilla.org/en/DOM/window.setInterval

то есть.

loadingTimer = setInterval(showLoading, 100);

Но для оптимальной совместимости с браузером вы должны использовать закрытие с явной ссылкой:

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

Ответ 2

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

Во-первых, не используйте строковые аргументы для setInterval/Timeout. Это издевается так же, как и с использованием eval, и может также сбой с ограничениями безопасности CSP в будущем. Вместо этого:

loadingTimer = setInterval(this.showLoading, 100);

Однако, как вы говорите, это потеряет ссылку владельца, поэтому вызываемая функция не увидит правильную this. В будущем (недавно определенное ECMAScript пятое издание) вы сможете привязать функцию к ее владельцу с помощью function.bind:

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

и если вы реализуете function.bind самостоятельно для браузеров, которые еще не имеют его (см. нижнюю часть этого ответа), вы можете использовать этот синтаксис сегодня.

В противном случае вам нужно будет использовать явное закрытие, как в приведенном выше примере Computer Linguist.