Итак, последний пост установил, что … Я создавал театральный опыт в реальном времени. Мы начнем просто … Создание простого таймера, так как я упомянул, что самая ключевая часть поддержания шоу – это контроль SM по времени. Поэтому, начиная с общих часов, важно, актеры будут знать, где они находятся, подсказки будут в режиме ожидания, и, надеюсь, все будет вместе.
После того, как мы пройдемся через процесс установления того, как установить таймер, я расскажу, как это синхронизируется со всеми, но в другой раз попадет в этот код.
Таким образом, SetInterval – это простая функция с обратным вызовом, а затем задержка в миллисекундах. Скажи, ты хочешь сказать привет каждую секунду (у меня есть молодые племянницы и племянники Так что я испытал такую вещь в реальной жизни). setInterval (() => {console.log ("hi")}, 1000) Таким образом, в начале существует анонимная функция, и она запускает каждые 1000 миллисекунд. Достаточно легко. Не так быстро… Ну, одна секунда, чтобы быть точной. Это будет продолжаться и может вызвать утечку памяти из -за того, что функция может постоянно работать в фоновом режиме.
Чтобы исправить это, вы можете назначить интервал с именем переменной. let (() => {console.log ("hi")}, 1000) Установка его на переменную все равно запустит интервал, чтобы остановить все, что вам нужно сделать, это чистоинтерваль (myInterval), и он остановится.
Забавно отметить, что если вы консоли.log (myInterval) это число, сохраняющееся в качестве ссылки для включения очистки. У вас может быть много таймеров на странице, поэтому важно, чтобы они были доступны.
Хорошо, теперь, когда были установлены основные правила, давайте поговорим о таймере. Легкий переход,
let time = 0
let countUp = setInterval(()=>{timer +=1}, 1000)
Это будет расти каждую секунду, если вы очистите (отсчет) время останется прежним, но вы можете создать другой отсчет, просто запустив строку COUNTUP Анкет
React добавляет совершенно другой слой сложности к чему -то подобному. Из-за повторных ресурсов вы можете случайно удвоиться на таймере. Это нехорошо, когда вы пытаетесь сохранить последовательность среди отдаленных браузеров.
Итак, чтобы сделать это, вы добавляете логику в монтаж и неканательность (на самом деле, почему они не называют это раздумкой? всегда беспокоил меня). Государственные путешествия вместе с повторными ресторанами, так что вы можете добавить значение Clockrunning и установить его на истинную или ложную, исходя из того, что происходит. Мы сделаем это на данный момент функциональный компонент.
import react, {useEffect, useState} from 'react'
function Counter(props) {
let [time, setTime] = useState(0)
let [clockRunning, setClockRunning]= useState(false)
let myInterval
clearInterval(myInterval)
useEffect(()=>{
if (clockRunning){
myInterval = (setInterval(() => { setTime(time += 1) }, 1000))
}
return ()=> clearInterval(myInterval)},[clockRunning]
)
return (
<>
{time}
)
}
export default Counter
Итак, здесь мы очищаем интервал на рендере на всякий случай. Это ничего не стоит, но это хорошая защита. Мы не выполняем дефолт часы, чтобы не работать на первом рендере, но наши кнопки могут изменить это. В нашем использовании, он работает каждый раз, когда подсчитывает изменения. Возвращение внизу – это очистка интервала на ререндере, однако, поскольку мы начинаем новый интервал на рендеринге, если Clockrunning правда, мы ничего не потеряем.
Это ни в коем случае не причудливо, но это основа для большого количества шоу. Эта информация и многое другое пройдут через веб -питания, чтобы у каждого был один и тот же опыт. Таймер, однако, хранится на сервере. Это огромная часть этого трюка. Мы беспокоились о сбое компьютера сценических менеджеров, или они потеряли подключение к Интернету, поэтому нам нужно было найти способ сообщить всю эту информацию. Поддерживая таймер на сервере и общаясь через веб -питания, если вы вошли на сайт, это означает, что у вас есть доступ к таймеру. Подробнее об этом в другой раз. Мы начинаем строить наш контроль шоу!
Оригинал: “https://dev.to/amsmo/set-interval-9d0”