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

277
01 марта 2018, 14:27

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

Answer 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());
READ ALSO
Добавить библиотеку в проект Node.js Express app
javascript

Добавить библиотеку в проект Node.js Express app

Пытаюсь освоить WebStormСоздал проект Node

 370
Как сократить код
javascript

Как сократить код

Добрый день, помогите пожалуйста сократить данную запись:

 244
Временые зоны, даты в js и google sheets aps script
javascript

Временые зоны, даты в js и google sheets aps script

При создании нового гугл листа, если поместить в ячеку например 9:00 то она станет временем и будет выглядить так Sun Dec 31 1899 09:00:00 GMT+1000 (AEST)

 210
Как сделать так, чтобы можно было вписать только цифры и плюс вначале строки? Регулярки
javascript

Как сделать так, чтобы можно было вписать только цифры и плюс вначале строки? Регулярки

В интут можно было вписать только «+» в начале и цифрыНикаких других символов

 212