Здравствуйте решил написать простенький класс таймера используя ES6 синктаксис.
Есть две проблемы:
1.Как вынести переменные tick, min,seconds,minutes в конструктор, так что б они были видны внутри метода run()
2.При клике на кнопку стоп,таймер должен останавливаться и в cleatinterval должна попадать ссылка на таймер из конструтора.
Используя ES5 можно вынести контекст в отдельную функцию и с ней работать, как сделать тоже самое используя новый синтаксис?
class Timer {
constructor(){
this.timer;
}
run(){
let tick = 0;
let min = 0
let seconds = document.getElementById('seconds');
let minutes = document.getElementById('minutes');
this.timer = setInterval( () => {
tick++;
if(tick == 60){
min++;
tick = 0;
if(min < 9){
min = '0'+min;
}
minutes.innerHTML = min;
}
if( tick < 9){
tick = '0'+tick;
}
seconds.innerHTML = tick;
console.log('timer play');
},1000)
}
stop(){
console.log(this);//Ссылаетcя на btn
clearInterval(this.timer);//не работает
console.log('timer stop');
}
}
let main_timer = new Timer;
btn.addEventListener('click',main_timer.run);
stop.addEventListener('click',main_timer.stop);
Ответ
constructor(){
this.timer;
this.tick;
this.min;
this.seconds;
this.minutes;
}
run(){
this.tick = 0;
this.min = 0;
this.seconds = document.getElementById('seconds');
this.minutes = document.getElementById('minutes');
this.seconds.innerHTML = '';
this.minutes.innerHTML = '';
this.timer = setInterval( () => {
this.tick++;
if(this.tick == 60){
this.min++;
this.tick = 0;
this.minutes.innerHTML = (this.min < 10)? '0' + this.min : this.min;
}
this.seconds.innerHTML = (this.tick < 10)? '0' + this.tick : this.tick;
console.log('timer play');
}, 1000);
}
Что до контекста, в котором будут выполняться run и stop
btn.addEventListener('click',main_timer.run.bind(main_timer));
stop.addEventListener('click',main_timer.stop.bind(main_timer));
или
btn.addEventListener('click', () => main_timer.run());
stop.addEventListener('click', () => main_timer.stop());
или
class Timer {
...
runHandler() { return this.run.bind(this); }
stopHandler() { return this.stop.bind(this); }
btn.addEventListener('click', main_timer.runHandler());
stop.addEventListener('click', main_timer.stopHandler());
Комментариев нет:
Отправить комментарий