JS event loop / setTimeout

[Nolra]

code: https://github.com/Nolra/front_course_2023/tree/JS-event-loop-setTimeout

https://developer.mozilla.org/ru/docs/Web/API/setTimeout https://learn.javascript.ru/event-loop https://habr.com/ru/post/461401/

Домашнее задание

Измените компонент таймера (в материалах занятия), добавив возможность изменять 
через пользовательский интерфейс (input) задержку (delay)
На данный момент она составляет 1000 (1s)

Кроме того, добавьте возможность запускать обратный счет - кнопка reverse

[nedostatoksna]

https://github.com/nedostatoksna/course-front-end/tree/timer-homework

[Nolra]

https://github.com/nedostatoksna/course-front-end/tree/timer-homework

Функция reverse сейчас не работает в обратную сторону. Она должна буквально разворачивать счёт в зависимости от того в каком сейчас статусе сейчас счетчик - в плюсе, значит в минус и наоборот. Для этого нужен внешний флаг для отслеживания reverse статуса

Я рекомендую при нажатии на кнопку reverse просто менять этот статус, и проверять его в основной функции таймера, и не писать дополнительную функцию.

Также нужно преобразовывать к числу то что мы получаем из html во всех случаях.

[nedostatoksna]

https://github.com/nedostatoksna/course-front-end/tree/timer-homework

Функция reverse сейчас не работает в обратную сторону. Она должна буквально разворачивать счёт в зависимости от того в каком сейчас статусе сейчас счетчик - в плюсе, значит в минус и наоборот. Для этого нужен внешний флаг для отслеживания reverse статуса

Я рекомендую при нажатии на кнопку reverse просто менять этот статус, и проверять его в основной функции таймера, и не писать дополнительную функцию.

Также нужно преобразовывать к числу то что мы получаем из html во всех случаях.

новая версия с исправлениями https://github.com/nedostatoksna/course-front-end/tree/corrections

[Nolra]

https://github.com/nedostatoksna/course-front-end/tree/timer-homework

Функция reverse сейчас не работает в обратную сторону. Она должна буквально разворачивать счёт в зависимости от того в каком сейчас статусе сейчас счетчик - в плюсе, значит в минус и наоборот. Для этого нужен внешний флаг для отслеживания reverse статуса Я рекомендую при нажатии на кнопку reverse просто менять этот статус, и проверять его в основной функции таймера, и не писать дополнительную функцию. Также нужно преобразовывать к числу то что мы получаем из html во всех случаях.

новая версия с исправлениями https://github.com/nedostatoksna/course-front-end/tree/corrections

Можем отрефакторить (сделал быструю версию для консоли, проанализируй, адаптируй для себя и обнови ещё раз)

let timer;
let delay = 1000;
let timerStatusForReverse = true;  // !!! 1
let timerDisplay = 0;

let timerGo = function(event) {
    clearTimeout(timer);
    timer = setTimeout(
      function tick() {
          timerStatusForReverse ? timerDisplay++ : timerDisplay--;  // !!! 2
          console.log(timerDisplay)
          timer = setTimeout(tick, delay);
      }, delay
  );           
};

let reverseTimer = function() { 
    timerStatusForReverse = !timerStatusForReverse  // !!! 3
};

timerGo()

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

[NastyaKamalova]

https://github.com/NastyaKamalova/TabsAndComponents

[nedostatoksna]

https://github.com/nedostatoksna/course-front-end/tree/timer-homework

Функция reverse сейчас не работает в обратную сторону. Она должна буквально разворачивать счёт в зависимости от того в каком сейчас статусе сейчас счетчик - в плюсе, значит в минус и наоборот. Для этого нужен внешний флаг для отслеживания reverse статуса Я рекомендую при нажатии на кнопку reverse просто менять этот статус, и проверять его в основной функции таймера, и не писать дополнительную функцию. Также нужно преобразовывать к числу то что мы получаем из html во всех случаях.

новая версия с исправлениями https://github.com/nedostatoksna/course-front-end/tree/corrections

Можем отрефакторить (сделал быструю версию для консоли, проанализируй, адаптируй для себя и обнови ещё раз)

let timer;
let delay = 1000;
let timerStatusForReverse = true;  // !!! 1
let timerDisplay = 0;

let timerGo = function(event) {
    clearTimeout(timer);
    timer = setTimeout(
      function tick() {
          timerStatusForReverse ? timerDisplay++ : timerDisplay--;  // !!! 2
          console.log(timerDisplay)
          timer = setTimeout(tick, delay);
      }, delay
  );           
};

let reverseTimer = function() { 
    timerStatusForReverse = !timerStatusForReverse  // !!! 3
};

timerGo()

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

https://github.com/nedostatoksna/course-front-end/tree/corrections

[voidaugust]

https://github.com/pashbespaloff/homework/tree/time

[Nolra]

https://github.com/pashbespaloff/homework/tree/time

Мне нравится как сделана switch case логика, это клево, только мне кажется можно немного улучшить чтобы избежать повторения кода в случае с кейсами timerPlay / timerReverse. Они делают полностью одно и тоже, разница лишь в положительном или отрицательном движении счетчика.

еще кажется излишним перегон timerDisplay.innerHTML = currentTime туда и обратно

и последнее в конструкции switch case обязательно нужно иметь default блок, когда мы не попали ни в один из кейсов