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

#javascript #ecmascript_6

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



    

Ответы

Ответ 1

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