Как многократно вызывать функцию, когда мышь нажата?

Question

Я использую реагирование для создания внешнего интерфейса, который должен использовать мою веб-камеру. Мне нужно иметь возможность нажать и удерживать кнопку и повторно вызывать функцию, которая будет захватывать кадр с камеры.

import React,{useState,useRef,useEffect} from "react"


export function VideoFeed(){
const[constraints] = useState({width:300,height:300})
const longPress = useLongPress(takePhoto)

let video = useRef(null)

useEffect(()=>{
    navigator.mediaDevices.getUserMedia({video:true})
    .then(stream=>{
        let vid = video.current
        vid.srcObject = stream;
        vid.play();
    })
    .catch(e=>{
        console.log(e)
    })
},[video])

function takePhoto() {
        console.log("hey")
}

return(
    <div>
        <video autoPlay ={true} ref ={video} width={constraints.width} 
            height={constraints.height}>
        </video>
        <button {...longPress}>Snap Photo</button>
    </div>
    )
}


export function useLongPress(callback=()=>{}) {
 const [startLogPress, setStartLongPress] = useState(false);

   useEffect(() => {
   let timerId;
    if (startLogPress) {
      timerId = setTimeout(callback, 0);
    } else {
      clearTimeout(timerId);
    }

return () => {
  clearTimeout(timerId);
};
 }, [startLogPress]);

    return {
      onMouseDown: () => setStartLongPress(true),
      onMouseUp: () => setStartLongPress(false),
      onMouseLeave: () => setStartLongPress(false),
      onTouchStart: () => setStartLongPress(true),
      onTouchEnd: () => setStartLongPress(false),
   };
}

Я использую крючки и не могу понять, как зациклить функцию. Если я добавляю цикл while в хук useEffect, приложение разрывается. Одиночные клики работают, но нажатие и удержание не

Answer 1

Вот рабочий пример использования функции setInterval .Надеюсь, что это работает для вашей конкретной ситуации.

var value = 0;
var interval;

function update() {
  value++;
  document.getElementById("value-display").innerHTML = "Value: " + value;
}

function down() {
  value = 0;
  interval = setInterval(update, 100);
}

function up() {
  clearInterval(interval);
}

<h3 id="value-display">
  Value:
</h3>

<button type="button" onmousedown="down()" onmouseup="up()">
  Click me!
</button>

Answer 2

Вы можете использовать как useInterval , так и useState , чтобы решить, следует ли запускать вашу функцию или нет.

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

const onMouseDown = () => {
  console.log("mouse is down");
};

function App() {
  const [isMouseDown, setMouseDown] = useState(false);

  useInterval(onMouseDown, isMouseDown ? 100 : null);

  return (
    <div className="App">
      <h1
        onMouseDown={() => setMouseDown(true)}
        onMouseUp={() => setMouseDown(false)}
      >
        Mouse down here tp trigger the <i>onMouseDown</i> function
      </h1>
    </div>
  );
}

Запустить в CodeSandBox