如何在鼠标按下时重复调用函数

Question

我使用 react 来构建一个需要使用我的网络摄像头的前端。我需要能够单击并按住一个按钮并反复调用一个函数，该函数将从相机中抓取帧。

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),
   };
}

我使用钩子并且无法弄清楚如何循环函数。如果我在 useEffect 钩子中添加一个 while 循环，应用程序就会中断。单击有效，但单击并按住不起作用

Answer 1

您可以使用 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>
  );
}

在代码沙盒中运行

Answer 2

下面是一个使用 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>