Таймер обратный отсчет

@Anna_Batuk · Регистрация: 19.01.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Подскажите, как ускорить таймер?
Задача такая:

Написать таймер обратного отсчета (каждую секунду уменьшать значение на 1), после окончания вывести сообщение.

Мой код (у меня как-то медленно идет отсчет)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let timer; // пока пустая переменная
let x =5; // стартовое значение обратного отсчета
countdown(); // вызов функции
function countdown(){  // функция обратного отсчета
    document.getElementById('timer').innerHTML = x;
    x--; // уменьшаем число на единицу
    if (x<0){
        clearTimeout(timer); // таймер остановится на нуле
        alert ("Вы победили в конкурсе!");
    }
    else {
        timer = setTimeout(countdown, 1000); 
    }
}

@brian778 · 10.01.2023, 03:01

Вам нужно это
https://developer.mozilla.org/... etInterval

@Anna_Batuk · 10.01.2023, 05:55 **[ТС]**

для работы таймера нужно использовать функции setTimeout и setInterval? Одну из них или обе. Запуталась.
Если пишу setTimeout, то отсчет идет и функция останавливается, когда 0, но как будто медленно идет отсчет. Хотела ускорить, попыталась использовать setInterval, но не получается задать интервал, чтобы каждую секунду уменьшалось, гораздо быстрее таймер меняет значение, и потом я никак не могу остановить функцию эту((( зацикливается и все. Пробовала писать clearInterval();

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

Ниже, мой код и очередная попытка:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let timer; // пока пустая переменная
let x =30; // стартовое значение обратного отсчета
countdown(); // вызов функции
let counter = setInterval(countdown, 1000);
function countdown(){  // функция обратного отсчета
   document.getElementById('timer').innerHTML = x;
    x--; // уменьшаем число на единицу
 
    if (x<0){
        clearTimeout(timer); // таймер остановится на нуле
        clearInterval(counter);
        alert ("Вы победили в конкурсе!");
    }
    else {
        timer = setTimeout(countdown, 1000);
    }
 
}

KingdaKa · 10.01.2023, 07:23

JavaScript
1
2
3
4
5
6
7
8
function interval(n) {
  console.log(n);
  if (n > 0) {
    n -= 1;
    setTimeout(interval, 1000, n);
  }
}
interval(5);

Добавлено через 21 минуту

Сообщение от Anna_Batuk

таймера нужно использовать функции setTimeout и setInterval?

И то и то, но setInterval нам не гарантирует, что между его вызовами будет указанное время, а при использовании setTimeout это почти возможно, вот набросал пример:

JavaScript
1
2
3
4
let t = Date.now();
const getSleep = (ms) => {
  for (let p = Date.now() + ms; Date.now() < p; );
};

В этом случае задача функции interval выполняется больше, чем наш заданные интервал в 100 ms.

JavaScript
1
2
3
4
5
6
7
8
9
10
function interval(n) {
  console.log(n, Date.now() - t);
  t = Date.now();
  if (n > 0) {
    n -= 1;
    getSleep(500);
    setTimeout(interval, 100, n);
  }
}
interval(5);

5 0
4 608
3 601
2 602
1 601
0 602

Мы видим, что время между выводом 500 + наши 100 заказанные миллисекунды!

JavaScript
1
2
3
4
5
6
7
8
let n = 5;
let i = setInterval(() => {
  console.log(n, Date.now() - t);
  t = Date.now();
  n--;
  getSleep(500);
  if (n < 1) clearInterval(i);
}, 100);

5 108
4 500
3 500
2 500
1 500

А тут по интервала нет вообще, а должен быть 100.

У Бизюкина из Яндекса отличная лекция есть по асинхронности, эдакая выжимка годного материала, конкретно про эти две функции смотреть с 9:19

@Anna_Batuk · 10.01.2023, 14:39 **[ТС]**

Сообщение от KingdaKa

Javascript

В общем я постаралась поработать с тем, что Вы написали, также на проверку отправляла работу. и вот что получилось:
1. Не получается с этими двумя функциями(( раньше хоть сильно быстро шел отсчет, теперь вообще все стоит(
2. Также мне вот какие написали замечания (я, конечно, постаралась их исправить):
* Во-первых, не надо получать html элемент каждый раз, получите его вначале один раз, а дальше в его свойство textContent присваивайте значение счетчика
* Кроме того, вы сначала счетчику делаете декремент, а потом проверяете на отрицательное значение, это значит что условие сработает когда х будет -1, и это значение у вас уже записано в элемент и его будет видно на странице. Нужно, что бы условие срабатывало при 0, а не при -1
Если счетчик достиг 0, удалите интервал (это есть), выведете сообщение (это есть), верните счетчику значение 30 (этого нет), запустите новый интервал (этого нет). Пока счетчик не достиг 0, нужно просто менять у элемента textContent

Мой код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let currentTime =30; // стартовое значение обратного отсчета
countDown(); // вызов функции
let counter = setInterval(currentTime, 1000);
let timer = document.getElementById("timer").innerHTML;
 
    let countDown = function(){  // функция обратного отсчета
    let currentTime = parseFloat(timer.textContent);
    if (currentTime > 0) {
    timer.textContent = currentTime - 1;
    clearTimeout(currentTime); // таймер остановится на нуле
    alert ("Вы победили в конкурсе!");
    }
    else {
        window.clearInterval(timer);
    }
    window.setInterval(timer, 1000);  
}

подскажите, есть ли что-то верное? Как запустить новый интервал и там уже у элемента менять?

krvsa · 10.01.2023, 14:45

Сообщение от Anna_Batuk

есть ли что-то верное?

Практически ничего верного нет...

@klyapa · 10.01.2023, 14:46

Сообщение от Anna_Batuk

есть ли что-то верное?

Ничего не смущает? ... дальше не смотрел

JavaScript
1
2
3
let currentTime =30; // стартовое значение обратного отсчета
countDown(); // вызов функции
let counter = setInterval(currentTime, 1000);

krvsa · 10.01.2023, 14:47

Как по мне - так просто какой-то супнабор из английских слов...

Добавлено через 47 секунд

Сообщение от klyapa

дальше не смотрел

Там и дальше в том же духе...

@klyapa · 10.01.2023, 15:07

Сообщение от Anna_Batuk

Написать таймер обратного отсчета (каждую секунду уменьшать значение на 1), после окончания вывести сообщение.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let start = 8;
let end = 5;
 
let idInterval = setInterval(countInterval, 1000);
 
function countInterval() {
    console.log(start);
    if(start === end) {
        console.log(`дальше кина не будет\nstart = ${start}\nend = ${end}`);
        clearInterval(idInterval);
    }
    start--;
}

@kidASM · 10.01.2023, 16:25

Мой вариант

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Countdown</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            body {
                display: flex;
                flex-direction: column;
            }
            header {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 7px 0px;
                border-bottom: 1px solid #eeeeee;
            }
            input[type="submit"] {
                margin-left: 10px;
                padding: 1px 17px;
                cursor: pointer;
            }
            main {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                flex-basis: 100%;
                font-size: 20rem;
            }
        </style>
    </head>
    <body>
        <header>
            <form name="time">
                <label for="hours">Часы: </label>
                <input type="text" id="hours" size="2" name="hours">
                <label for="minutes">Минуты: </label>
                <input type="text" id="minutes" size="2" name="minutes">
                <label for="seconds">Секунды: </label>
                <input type="text" id="seconds" size="2" name="seconds">
                <input type="submit" name="btnStart" value="Старт">
                <input type="submit" name="btnPasuse" value="Пауза">
            </form>
        </header>
        <main>00:00:00</main>
        <script>
            const btnStart = document.forms.time.btnStart;
            const btnPasuse = document.forms.time.btnPasuse;
            const main = document.getElementsByTagName('main')[0];
            let isPaused = false;
            if(btnStart && btnPasuse && main){
                btnPasuse.addEventListener('click', (event) => {
                    event.preventDefault();
                    isPaused = !isPaused;
                });
                btnStart.addEventListener('click', (event) => {
                    event.preventDefault();
                    let hours   = parseInt(document.forms.time.hours.value,   10);
                    let minutes = parseInt(document.forms.time.minutes.value, 10);
                    let seconds = parseInt(document.forms.time.seconds.value, 10);
                    if(!isNaN(hours) && !isNaN(minutes) && !isNaN(seconds)){
                        let totalSeconds = (hours * 3600) + (minutes * 60) + seconds;
                        main.textContent = addZero(hours)+":"+addZero(minutes)+":"+addZero(seconds);
                        const interval = setInterval(() => {
                            if(!isPaused){
                                totalSeconds--;
                                let h = Math.floor(totalSeconds/3600);
                                let m = Math.floor((Math.floor(totalSeconds - (h*3600)))/60);
                                let s = Math.floor(totalSeconds - (h*3600) - (m * 60));
                                if(totalSeconds < 0){
                                    clearInterval(interval);
                                    alert("Время истекло!");
                                }
                                else{
                                    main.textContent = addZero(h)+":"+addZero(m)+":"+addZero(s);
                                }
                            }
                        }, 1000);
                    }
                });
            }
            function addZero(x) {
                return (x < 10) ? '0'+x : ''+x;
            }
        </script>
    </body>
</html>

@Anna_Batuk · 11.01.2023, 01:27 **[ТС]**

Да я уже поняла, что полную ерунду написала

У меня по заданию все проще.. Я кстати почти вроде исправила, только теперь почему таймер наоборот вперед считает до 30 сек

Вот как у меня

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="task.css">
    <link rel="stylesheet" href="../../assets/css/style.css" />
    <title>Таймер обратного отсчёта</title>
</head>
<body>
    <header class="header">
        <div class="logo__container">
        </div>
        <h1 class="header__title">
            Домашнее задание к занятию 1.1 «Возможности JavaScript в браузере». Таймер обратного отсчёта
        </h1>
    </header>
    <main class="content">
        <div class="card">
            <div id="status">
                До окончания конкурса осталось секунд: <span id="timer">59</span>
            </div>
        </div>
    </main>    
    <script src="task.js"></script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let currentTime = 30; // стартовое значение обратного отсчета
let timer = document.getElementById('timer'); 
let counter = setInterval(countDown, 1000); 
function countDown(){  // функция обратного отсчета
    currentTime--; // уменьшаем число на единицу
    //дальше надо переменной timer, ее сву textContent присвоить счетчик 
   timer.textContent = setTimeout (currentTime, 1000);
 
    if (currentTime===0){ // тут сравнение с 0
        clearInterval(counter); 
        alert ("Вы победили в конкурсе!"); 
    }
    
}

KingdaKa · 11.01.2023, 02:17

JavaScript
1
2
3
4
5
6
7
8
9
10
11
        let currentTime = 5;
        let timer = document.getElementById('timer');
        let counter = setInterval(countDown, 1000);
        function countDown() {
            timer.textContent = currentTime;
            currentTime--; //
            if (currentTime < 0) {
                clearInterval(counter);
                alert("Вы победили в конкурсе!");
            }
        }

JavaScript
1
timer.textContent = setTimeout (currentTime, 1000);

Это зачем??? Почитайте документацию по функциям-то на MDN...

@Anna_Batuk · 11.01.2023, 02:58 **[ТС]**

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

И в примере самом вот так счетчик этот быстро работает

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@brian778 419 / 311 / 107 Регистрация: 30.08.2022 Сообщений: 1,195
	10.01.2023, 03:01
	Вам нужно это https://developer.mozilla.org/... etInterval 0

@Anna_Batuk 0 / 0 / 0 Регистрация: 19.01.2015 Сообщений: 62 Записей в блоге: 1
	11.01.2023, 02:58 [ТС]
	Ну мне сказали, что нужно оба метода использовать и в этом месте, где я вписала строку эту нужен счетчик... И в примере самом вот так счетчик этот быстро работает Миниатюры 0

Таймер обратный отсчет

Решение

Решение