Как остановить выполнение функции?

Question

[Alexander3928]

Как остановить функцию при клике? К примеру когда я нажимаю на кнопку с id="GD"
должна запустится функция timerGD(), а функции timerHY() и timerIU() перестать работать.
Как это можно сделать?

<div class="switches">
          <button id="NY">NY</button>
          <button id="GD">GD</button>
          <button id="IU">IU</button>
        </div>

switches.addEventListener("click", (event) => {
      if (event.target.id == "NY") {
        timerNY();
        console.log(1);
      } else {
        //?
      }
      if (event.target.id == "GD") {
        timerGD();
        console.log(2);
      } else {
        //?
      }
      if (event.target.id == "IU") {
        timerIU();
      } else {
        //?
      }
    });

Comments

[Сергей Сергей]

как выглядят эти функции таймеров?

[Alexander3928]

Сергей Сергей,

export function timerGD() {
  let timeGD = new Date("Mar 8 2023 00:00:00");

  const timer = () => {
    let now = new Date();
    let getLeft = timeGD - now;
    const titleNY = "Eigth March";
    const zero = "0";

    let days = Math.floor(getLeft / 1000 / 60 / 60 / 24);
    let hours = Math.floor(getLeft / 1000 / 60 / 60) % 24;
    let minutes = Math.floor(getLeft / 1000 / 60) % 60;
    let seconds = Math.floor(getLeft / 1000) % 60;

    if (days < 10) days = zero + days;
    if (hours < 10) hours = zero + hours;
    if (minutes < 10) minutes = zero + minutes;
    if (seconds < 10) seconds = zero + seconds;

    document.querySelector(".title-big").textContent = titleNY;
    document.querySelector(".timer-days__days").innerHTML = days;
    document.querySelector(".timer-hours__hours").innerHTML = hours;
    document.querySelector(".timer-minutes__minutes").innerHTML = minutes;
    document.querySelector(".timer-seconds__seconds").innerHTML = seconds;
  };

  timer();
  setInterval(timer, 1000);
}

[Сергей Сергей]

clearInterval

[Антон Горецкий]

Сделайте для каждой ф-и глобальную переменную-флаг, которые они будут проверять периодически при работе. Если флаг true - продолжают работать, false - завершаются. Примерно так:

let NY = true
function timerNY() {
while(NY && ваши условия повтора){
// основной код ф-ии
}
}

в момент когда нужно завершить работу ф-ии меняете флаг на false
NY = false
Но это один из вариантов, можно и другие сделать через интервал и очистку.

Answer 1

[Антон Горецкий]

export function timerGD() {
  let timeGD = new Date("Mar 8 2023 00:00:00");

  const timer = () => {
    let now = new Date();
    let getLeft = timeGD - now;
    const titleNY = "Eigth March";
    const zero = "0";

    let days = Math.floor(getLeft / 1000 / 60 / 60 / 24);
    let hours = Math.floor(getLeft / 1000 / 60 / 60) % 24;
    let minutes = Math.floor(getLeft / 1000 / 60) % 60;
    let seconds = Math.floor(getLeft / 1000) % 60;

    if (days < 10) days = zero + days;
    if (hours < 10) hours = zero + hours;
    if (minutes < 10) minutes = zero + minutes;
    if (seconds < 10) seconds = zero + seconds;

    document.querySelector(".title-big").textContent = titleNY;
    document.querySelector(".timer-days__days").innerHTML = days;
    document.querySelector(".timer-hours__hours").innerHTML = hours;
    document.querySelector(".timer-minutes__minutes").innerHTML = minutes;
    document.querySelector(".timer-seconds__seconds").innerHTML = seconds;
  };
  if(!GD) {
clearInterval(cl);
return;
}
  timer();
  const cl = setInterval(timer, 1000);
}
let NY=true;
let GD=true;
let IU=true;
switches.addEventListener("click", (event) => {
      if (event.target.id == "NY") {
        timerNY();
        console.log(1);
GD=false
IU=false
      } else {
        //?
      }
      if (event.target.id == "GD") {
        timerGD();
        console.log(2);
NY=false
IU=false
      } else {
        //?
      }
      if (event.target.id == "IU") {
        timerIU();
GD=false
NY=false
      } else {
        //?
      }
    });

Comments

[Alexander3928]

К сожалению такой вариант, не работает(. Таймеры не останавливаются

[Антон Горецкий]

Alexander3928, всё верно, отредактировал - надо было return из ф-ии добавить после очистки.

[Alexander3928]

Антон Горецкий, Я не знаю почему, но таймера начинают нормально переключатся, только со 2 нажатия по кнопке EIGTH MARCH. В чем может быть такой ошибки?

document.addEventListener("DOMContentLoaded", allTimer);

function allTimer() {
  let timeNY = new Date("Jan 1 2023 00:00:00");
  let timeGD = new Date("Mar 8 2023 00:00:00");
  let fNY = true;
  let fGD = false;

  const timerNY = () => {
    let now = new Date();
    let getLeft = timeNY - now;
    const titleNY = "New Year";
    const zero = "0";

    let days = Math.floor(getLeft / 1000 / 60 / 60 / 24);
    let hours = Math.floor(getLeft / 1000 / 60 / 60) % 24;
    let minutes = Math.floor(getLeft / 1000 / 60) % 60;
    let seconds = Math.floor(getLeft / 1000) % 60;

    if (days < 10) days = zero + days;
    if (hours < 10) hours = zero + hours;
    if (minutes < 10) minutes = zero + minutes;
    if (seconds < 10) seconds = zero + seconds;

    document.querySelector(".title-big").textContent = titleNY;
    document.querySelector(".timer-days__days").innerHTML = days;
    document.querySelector(".timer-hours__hours").innerHTML = hours;
    document.querySelector(".timer-minutes__minutes").innerHTML = minutes;
    document.querySelector(".timer-seconds__seconds").innerHTML = seconds;

    if (!fNY) clearInterval(clearNY);
  };
  
  timerNY();
  const clearNY = setInterval(timerNY, 1000);

  const timerGD = () => {
    let now = new Date();
    let getLeft = timeGD - now;
    const titleGD = "Woman's Day";
    const zero = "0";

    let days = Math.floor(getLeft / 1000 / 60 / 60 / 24);
    let hours = Math.floor(getLeft / 1000 / 60 / 60) % 24;
    let minutes = Math.floor(getLeft / 1000 / 60) % 60;
    let seconds = Math.floor(getLeft / 1000) % 60;

    if (days < 10) days = zero + days;
    if (hours < 10) hours = zero + hours;
    if (minutes < 10) minutes = zero + minutes;
    if (seconds < 10) seconds = zero + seconds;

    document.querySelector(".title-big").textContent = titleGD;
    document.querySelector(".timer-days__days").innerHTML = days;
    document.querySelector(".timer-hours__hours").innerHTML = hours;
    document.querySelector(".timer-minutes__minutes").innerHTML = minutes;
    document.querySelector(".timer-seconds__seconds").innerHTML = seconds;

    if (!fGD) clearInterval(clearGD);
  };

  const clearGD = setInterval(timerGD, 1000);

  const switchesTarget = () => {
    const switches = document.querySelector(".switches");
    switches.addEventListener("click", (event) => {
      if (event.target.id == "NY") {
        timerNY();
        fNY = true;
        fGD = false;
        console.log(fNY, fGD);
      }
      if (event.target.id == "GD") {
        timerGD();
        fNY = false;
        fGD = true;
        console.log(fNY, fGD);
      }
    });
  };

  switchesTarget();
}

[Антон Горецкий]

Alexander3928, переместите проверку в начало ф-ии и добавьте return

if (!fGD) {
clearInterval(clearGD);
return
}

для каждой ф-ии. А флаги все должны быть true при объявлении.

[Alexander3928]

Антон Горецкий, все равно косо работает(. Ну ладно, спасибо за помощь