如何在鼠标按下时重复调用一个函数?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在鼠标按下时重复调用一个函数?相关的知识,希望对你有一定的参考价值。
我使用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循环,应用程序就会中断。单击即可,但点击并按住则不然
答案
这是使用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>
另一答案
您可以使用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>
);
}
以上是关于如何在鼠标按下时重复调用一个函数?的主要内容,如果未能解决你的问题,请参考以下文章
当鼠标仍然按下时,如何防止在 Winforms Listview 中立即触发 MouseUp 事件?
如何在鼠标左键按下时触发循环 autoclicker c++