防抖 import React, { useState, useEffect } from 'react'; const DebounceExample = () => { const [inputValue, setInputValue] = useState(''); useEffect(() => { const delay = 1000; // 设置防抖延迟时间为1秒 const timer = setTimeout(() => { // 在延迟时间结束后执行相应操作,比如发送请求等 console.log('Debounced input value:', inputValue); }, delay); return () => { clearTimeout(timer); // 在每次重新渲染前清除上一次的定时器 }; }, [inputValue]); const handleInputChange = (e) => { setInputValue(e.target.value); }; return ( <div> <input type="text" onChange={handleInputChange} placeholder="Type something..." /> </div> ); }; export default DebounceExample; 节流 import React, { useState, useEffect } from 'react'; const ThrottleExample = () => { const [clickCount, setClickCount] = useState(0); const [throttled, setThrottled] = useState(false); const handleClick = () => { if (!throttled) { setClickCount(prevCount => prevCount + 1); setThrottled(true); } }; useEffect(() => { const delay = 1000; // 设置节流时间间隔为1秒 const timer = setTimeout(() => { setThrottled(false); }, delay); return () => { clearTimeout(timer); // 在每次重新渲染前清除上一次的定时器 }; }, [throttled]); return ( <div> <button onClick={handleClick}>Click me</button> <p>Click count: {clickCount}</p> </div> ); }; export default ThrottleExample;
标签:delay,防抖,const,节流,react,useState,return,useEffect From: https://www.cnblogs.com/zjxzhj/p/18108612