Как правильно организовать работу с таймерами?

Question

Соломон

javascript , vue

Как правильно организовать работу с таймерами?

Как реализовать вывод уведомления на 10 секунд, чтобы оно автоматически закрывалось и повторно появлялось через 10 секунд после закрытия (как самостоятельно, так и при нажатии)?

21 октября 2024 г. 12:02

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для реализации работы с таймерами в JavaScript можно использовать функции `setTimeout` и `setInterval`. В вашем случае, чтобы создать уведомление, которое будет показываться в течение 10 секунд и исчезать, а затем повторяться через 10 секунд после закрытия, лучше всего подойдет комбинация этих функций.

Вот пример реализации данного сценария:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Уведомление</title>
    <style>
        #notification {
            display: none;
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 20px;
            background-color: #f0c674;
            border: 1px solid #c9c9c9;
            border-radius: 5px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div id="notification">
        Уведомление! <button onclick="closeNotification()">Закрыть</button>
    </div>

    <script>
        let showNotificationInterval = 20000; // 10 секунд на показ, 10 секунд на скрытие
        let notificationVisible = false;

        function showNotification() {
            const notification = document.getElementById('notification');
            if (!notificationVisible) {
                notification.style.display = 'block';
                notificationVisible = true;
                setTimeout(closeNotification, 10000); // закрыть уведомление через 10 секунд
            }
        }

        function closeNotification() {
            const notification = document.getElementById('notification');
            notification.style.display = 'none';
            notificationVisible = false;
            setTimeout(showNotification, 10000); // снова показать уведомление через 10 секунд
        }

        // Изначально запускаем уведомление
        setTimeout(showNotification, showNotificationInterval);
    </script>
</body>
</html>
```

### Как это работает:

1. **HTML**: Создаем элемент `div` для уведомления с кнопкой для его закрытия.
2. **CSS**: Устанавливаем стиль для уведомления: позиционирование, цвет фона и т.д.
3. **JavaScript**:
   - Определяем переменную для отслеживания видимости уведомления.
   - `showNotification()`: Функция, которая показывает уведомление и устанавливает таймер на его автоматическое закрытие через 10 секунд.
   - `closeNotification()`: Функция, которая скрывает уведомление и устанавливает таймер на его повторное появление через 10 секунд.
   - Изначально запускаем первое уведомление через `setTimeout`.

### Использование:
Когда пользователь загрузит страницу, уведомление появится, через 10 секунд будет закрыто и снова появится через 10 секунд. Пользователь также может закрыть уведомление путем нажатия кнопки, после чего оно снова появится через 10 секунд.