ClearInterval не очищает установленный интервал onMouseUp
При попытке создать событие кнопки onMouseDown функция должна запускаться по истечении заданного времени. Функция запускается onMouseDown и очищает интервал onMouseUp, но интервал продолжает работать после отпускания кнопки.
Это код в настоящее время. У меня есть глобальный интервал, и я установил его в функции посадки. Он должен сбрасываться в функции notPlanting, но это не так.
import React from "react";
function PlantDefuser() {
var interval
function planting() {
interval = setInterval(() => {
console.info("Defuser Planted")
}, 1000)
}
function notPlanting() {
console.info(interval)
clearInterval(interval)
}
return (
<button onMouseDown = {planting} onMouseUp = {notPlanting}>Press and Hold</button>
)
}
export default PlantDefuser
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Это может помочь вам:
useRef позволяет нам хранить и обновлять данные в компоненте, не запуская повторный рендеринг. Теперь единственный повторный рендеринг происходит при обновлении реквизита.
Мы можем сохранить интервал в ref вот так
import { useRef } from "react";
const PlantDefuser = () => {
const interval = useRef();
function planting() {
interval.current = setInterval(() => {
console.info("Defuser Planted");
}, 1000);
}
function notPlanting() {
clearInterval(interval.current);
}
return (
<button onMouseDown = {planting} onMouseUp = {notPlanting}>
Press and Hold
</button>
);
}
export default PlantDefuser
Эй, это работает! Спасибо за ответы всем. Похоже, мне еще многое предстоит узнать о реакции.
Когда вы объявляете такие переменные в функциональном компоненте, они создаются при каждом рендеринге. Вы должны сохранить идентификатор интервала в таком состоянии:
import React, { useState } from "react";
const PlantDefuser = () => {
const [plantingInterval, setPlantingInterval] = useState(null);
const planting = () => {
const plantingIntervalId = setInterval(() => {
console.info("Defuser Planted");
}, 1000);
setPlantingInterval(plantingIntervalId);
};
const notPlanting = () => {
clearInterval(plantingInterval);
setPlantingInterval(null);
};
return (
<button onMouseDown = {planting} onMouseUp = {notPlanting}>
Press and Hold
</button>
);
};
export default PlantDefuser;
Вы также можете убедиться, что интервал очищается при размонтировании компонента.
Установка interval в состояние делает ненужный повторный рендеринг. лучшие варианты здесь с помощью крючка useRef
Вы правы, но это не имеет ни малейшего значения. Вы знаете, как мы обрабатываем, например, значения входных данных.
Вы можете использовать хук useEffect с cleanup function для управления методом clearInterval.
как это :
function PlantDefuser() {
const [run, setRun] = useState(false);
useEffect(() => {
if (run) {
const countTimer = setInterval(() => {
console.info("Defuser Planted");
}, 1000);
return () => {
console.info(countTimer);
clearInterval(countTimer);
};
}
}, [run]);
return (
<button onMouseDown = {() => setRun(!run)} onMouseUp = {() => setRun(!run)}>
Press and Hold
</button>
);
}
export default PlantDefuser;
Обратите внимание, что функция мыши вверх будет срабатывать только в том случае, если вы наведете курсор на кнопку, вы можете захотеть обнаружить мышь на уровне окна и очистить свой интервал, когда это срабатывает вместо этого.