Как удалить несколько setIntervals из useEffect
Я загружаю несколько животных в свой проект ThreeJS. У всех этих животных есть PositionalAudio с функцией setInterval. Я использую их внутри функции useEffect. При обратном вызове я хочу очистить интервал, но он продолжает вызывать функцию.
Это функция, в которой я устанавливаю свой setInterval:
const loadAudio = () => {
const animalSound = new THREE.PositionalAudio(listener);
animalSound.setBuffer(animalBuffer);
playSounds = setInterval(() => {
animalSound.play();
} , 5000);
audios.push(animalSound);
}
В функции возврата я пытаюсь очистить интервал:
return () => {
audios.forEach((audio) => {
audio.stop();
clearInterval(playSounds);
});
};
К сожалению, звук продолжает воспроизводиться каждые 5 секунд.
Вот фрагмент кода
@AbuSufian Я сделаю фрагмент кода
—
09.12.2020 20:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов
Проще говоря, компонент - это фабрика для создания элементов.
0
2
483
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Согласно вашему фрагменту кода, скажем, у вас есть кнопка:
<button
onClick = {buttonToggle}
>
{start ? 'start' : 'stop'}
</button>
Изначально у нас есть некоторая настройка для useState и функция обработки щелчка.
const [seconds, setSeconds] = useState(0);
const [btnStart, setBtnStart] = useState(true);
const buttonToggle = useCallback(
() => setBtnStart(run => !run)
, []);
В useEffect вы сделаете следующие изменения
useEffect(() => {
if (!btnStart) {
// setSeconds(0); // if you want to reset it as well
return;
}
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
return () => clearInterval(interval);
}, [btnStart]);
Другие вопросы по теме
@react-three/postprocessing нет соответствующего экспорта из three.module.js для импорта «WebGLMultisampleRenderTarget»
Как я могу создать эффект размытия границ с помощью GLSL?
Три загрузчика JS GLTF не работают с Nuxt 3
Uncaught (в обещании) TypeError: невозможно прочитать свойства undefined (чтение «длина») для вершин three.js
Меши, отобранные после обновления позиций вершин буферной геометрии
Добавление значения в массив нажатием кнопки
Как получить матрицу преобразования из трехмерного пространства с помощью javascript?
Three.js GLTF изменяет материал объекта на материал другого объекта
Как я могу передать массив поплавков как юниформу шейдерам из Three JS
THREE.JS, изменение индекса геометрии буфера по умолчанию, преобразование геометрии, разработанной для THREE.PointsMaterial, в THREE.MeshBasicMaterial (или другое)
Похожие вопросы
Сколько раз значение повторяется в массиве объектов
Получить свойство значения div в событии клика
Как нажать For Loop в объекте внутри useState «React»
Невозможно показать модальное отображение uikit при включении в reactjs
Прикрепить прослушиватель событий к предоставленному разрешению геолокации
Не отображает элементы React useState
Как использовать глобальную переменную в нескольких файлах
Файлы размером более 16 КБ повреждаются при загрузке с использованием apollo и graphql
Ошибка при попытке развернуть проект React.js на GitLab
UseEffect не ждет Promise.all?
не могли бы вы добавить весь фрагмент кода useEffect.