SetTimeout( ), setInterval( )

События. Делегирование событий

by shurikation

HTML

1

JavaScript

//Чтобы отменить таймер - поместить в переменную и вызвать clearTimeout с этой перемнной
let timerId = setTimeout(sayHi, 3000);
clearTimeout(timerId); 
//Например, ползователь зарегился и нам не нужно ему показывать это окно


//то же самое но для интервального повторения, а не разового
let timerDi = setInterval(sayHi, 3000);
clearTimeout(timerDi); 


function sayHi() {
 alert('Hello world!')
}

//Проблема время вызова может быть больше или меньше, чем тот же вызов console.log. Несовпадение и задержка. Как решить?

let timerNew = setTimeout(function log() {
	console.log('Hello!');
  setTimeout(log, 2000);
});
//Эффект тот же. Но! Если бы console.log отрабатывал за 30 секунд или минуту или час, то интервал бы все равно отрабатывал через 2 секунды

//Плавно двигаем квадратик :)
function myAnimation( ) {
	let pos = 0;
  
  let id = setInterval(frame, 10);
  
  function frame() {
    if(pos == 300) {
    		clearInterval( );
    } else {
    	pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';

    }
  }
}

btn.addEventListener('click', myAnimation);

//Делегирование событий.
//1 вариант. Вешаем событие на родителя, вместо того, чтобы вешать событие накаждого потомка, который подходит нам по условию - нужному тэгу

btnParrent.addEventListener('click', function(event) {
	if (event.target && event.target.tagName == 'BUTTON') {
  	console.log('Клик прошел по кнопке!');
  }
});
//event.target &&... - это защита от дурака)

//2 вариант. То же самое, но выбираем по нужному классу:
btnParrent.addEventListener('click', function(event) {
	if (event.target && event.target.classList.contains('class')) {
  	console.log('Клик прошел по кнопке c классом .class!');
  }
});

//3 вариант. Ищем button с классом first:
btnParrent.addEventListener('click', function(event) {
	if (event.target && event.target.matches('button.first')) {
  	console.log('Клик прошел по кнопке c классом .class!');
  }
});