Страницы

Поиск по вопросам

понедельник, 11 марта 2019 г.

This при работе c событиями в ES6

Здравствуйте решил написать простенький класс таймера используя 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());

Комментариев нет:

Отправить комментарий