Setinterval в классе JS, как заставить работать?

Question

[AlikDex]

Время на сервере с тикающими часами формата

18 Ноября, 2016 11:32:07

<script type="text/javascript">
class ServerTime {

	constructor(server_time) {
		this.montharray = new Array("Января","Февраля","Марта","Апреля","Мая","Июня","Июля","Августа","Сентября","Октября","Ноября","Декабря");
		this.clockContainer = document.querySelector('#clock');

		var localTime = +Date.now();
		var serverTime = new Date(server_time);
		this.timeDiff = serverTime - localTime;

		this.init(); // инициировать таймер при создании объекта
	}

	init () {
		setInterval(this.renewClock(), 1000); // Не пашет
	}

	padlength (what) {
		var output=(what.toString().length == 1)? '0' + what : what;
		return output;
	}

	renewClock () {
	    var realtime = +Date.now() + this.timeDiff;

	    var date = new Date(realtime);

		var datestring = this.padlength(date.getDate()) + " " + this.montharray[date.getMonth()] + ", " + date.getFullYear();
		var timestring = this.padlength(date.getHours()) + ":" + this.padlength(date.getMinutes()) + ":" + this.padlength(date.getSeconds())

		this.clockContainer.innerHTML = datestring + " " + timestring;
	}
}
clock = new ServerTime('<?= date("F d, Y H:i:s", time());?>'); // с пхп отдается время и дата сервера.
//setInterval(function() { clock.renewClock() }, 1000); // При раскоментировании время начинает работать.
</script>

Вот. В таком виде не работает, а если завести вне класса, то вполне себе пашет. Собственно и вопрос, как запустить счетчик внутри класса то?

Answer 1

[Влад Хеллсайт]

init () {
    setInterval(() => {
       this.renewClock();
    }, 1000); // Пашет
}

Comments

[AlikDex]

ухтыж ебтыж, работает, спасибо! А можете в 2 словах объяснить почему работает именно так, а не иначе? Ну или ткнуть носом в урок или статью, которые объяснят. Или хотяб подсказку где искать =)

[Dark Hole]

AlikDex: эх. Спецификацию SetInterval надо читать. И про this. this в SetInterval - Window

[Влад Хеллсайт]

Dark Hole: всё просто у array function нету контекста выполнения и по этому она наследует его от родителя, тем самым избегая того что setInterval установит для this глобальную область видимости или с 'use strict' undefined

[Dark Hole]

Владлен Хеллсайт: я-то знаю.

[Влад Хеллсайт]

Dark Hole: не на тот комментарий ответил... Бывает.

Answer 2

[Stepanya]

замените
setInterval(this.renewClock(), 1000); // Не пашет
на

setInterval(function(){
  this.renewClock.call(this);
}, 1000); // Пашет

Comments

[AlikDex]

Ага, вроде пытается начать работать. Но не вызывается функция внутри метода renewClock

this.padlength(date.getDate())

[Dark Hole]

AlikDex: и не должна.

[AlikDex]

Dark Hole: а как заставить то? )

[AlikDex]

заменил. не пашет(это из примера на javascript.ru, читал) Вероятно, потому что в this внутри функции сет интервала объект window.

Answer 3

[Николай]

this.foo() - вызов функции
this.foo - ссылка на функцию
Все ваши ошибки от этого.
И почитайте про bind, apply, this или используйте стрелочные функции, они сохраняют контекст (this).