Блог

Главная - Вопросы по программированию - setTimeout не работает, и да, функция не имеет ()

setTimeout не работает, и да, функция не имеет ()

#javascript

Вопрос:

Я создаю таймер, и по какой-то причине таймер неправильно уменьшается, используя countDown функцию в приведенном ниже коде. Я использую setTimeout его для countDown повторного вызова, но когда я проверил отладчик, JavaScript даже не переходит в эту строку, после предпоследней строки timeEl.textContent = tempMinutes ":" tempSeconds; он просто останавливается. Я пытался setInterval , но это то же самое. Я хочу знать, как отключить таймер и setTimeout сделать свое дело, но как? Мы будем очень признательны за любой совет или помощь!

 const workBtnEl = document.querySelector("#work-btn");
const shortBreakBtnEl = document.querySelector("#short-break-btn");
const longBreakBtnEl = document.querySelector("#long-break-btn");
let timeEl = document.querySelector("#time");

const work = 25; 
const shortBreak = 5;
const longBreak = 15;

let currentMinutes, currentSeconds = 0;

workBtnEl.addEventListener("click", function() {
    timeEl.textContent = "25:00";
    currentMinutes = work;
    countDown(currentMinutes, 0);
});

function countDown(minutes, seconds) {
    if (seconds == 0) {
        if (minutes == 0) {
            return;
        }
        minutes -= 1;
        seconds = 59;
    }

    let tempSeconds = seconds;
    let tempMinutes = minutes;

    if (seconds < 10) {
        tempSeconds = "0"   seconds;
    }
    if (minutes < 10) {
        tempMinutes = "0"   minutes
    }

    timeEl.textContent = tempMinutes   ":"   tempSeconds;

    let time = setTimeout(countDown, 1000, minutes, seconds);
} 
 <button id="work-btn">
  Work
</button>
<button id="short-break-btn">
  Short break
</button>
<button id="long-break-btn">
  Long break
</button>

<span id="time">Time</span>

Ответ №1:

Вы никогда не уменьшаетесь seconds , когда оно ненулевое.

Поэтому добавьте это после if блока:

 if (seconds == 0) {
   // your code...
} else seconds--;    // <---

Комментарии:

1. На самом деле, лучший способ-это перейти seconds - 1 к рекурсивному setTimeout . Итак, на первом дисплее отображается обратный отсчет :00 .

2. Это устраняет проблему, но это не будет особенно точным таймером. Если видимость страницы изменится, события таймера перестанут выполняться. Лучше рассчитать прошедшее время при каждом запуске обратного отсчета, чтобы вы могли переключаться между вкладками

3. Можно сделать много комментариев, но вопрос в том, почему застопорился обратный отсчет.

Ответ №2:

Вам необходимо уменьшить переменную секунды в countDown функции, иначе каждый раз в вашей текстовой области будет печататься один и тот же текст.

Прямо сейчас у вас просто есть условие, если секунды равны 0, то установите значение секунд 59.

Ответ №3:

Посмотрите, что вы сделали в этой строке :

 let currentMinutes, currentSeconds = 0;

Текущие минуты будут в основном не определены, я использовал Node REPL для проверки
Если у вас есть что-то вроде :

 let a, b = 0

Значение a не было определено, и b было установлено равным нулю
Соответствующим назначением было бы

 let currentMinutes = 0;
let currentSeconds = 0;
Метки: , ,