React 定时发送函数:自定义频率、次数、停止控制
你可以使用 React 的 useEffect 和 useState 钩子来实现一个定时发送函数。下面是一个示例:\n\njsx\nimport React, { useState, useEffect } from 'react';\n\nconst TimerComponent = () => {\n const [intervalId, setIntervalId] = useState(null);\n const [count, setCount] = useState(0);\n\n const startTimer = (frequency, limit) => {\n const id = setInterval(() => {\n setCount(prevCount => prevCount + 1);\n }, frequency);\n setIntervalId(id);\n\n // 停止发送\n if (limit && count >= limit) {\n clearInterval(id);\n setIntervalId(null);\n }\n };\n\n const stopTimer = () => {\n clearInterval(intervalId);\n setIntervalId(null);\n };\n\n return (\n <div>\n <button onClick={() => startTimer(1000, 10)}>开始发送</button>\n <button onClick={stopTimer}>停止发送</button>\n <p>已发送次数: {count}</p>\n </div>\n );\n};\n\nexport default TimerComponent;\n\n\n在上面的例子中,startTimer函数用于启动定时器,并设置发送频率和发送次数的限制。每次定时器触发时,会更新count状态,并且如果达到发送次数限制,则停止定时器。stopTimer函数用于手动停止定时器。\n\n使用<TimerComponent />组件可以在你的应用中渲染这个定时发送功能。
原文地址: https://www.cveoy.top/t/topic/p1J4 著作权归作者所有。请勿转载和采集!