【React】实现一个基本的防抖函数

函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间（在这里和函数节流区分一下，函数节流是在触发完事件之后的一段时间之内不能再次触发事件）。 实现：

 1    const timer=useRef<any>(null)//react中可用方法之一是是用ref创建timer
 2   //创建防抖函数
 3    const useDebounce = (fun: Function, delay: number) => {
 4           return (lat: number, lng: number) => {
 5               if (timer.current) {
 6                   clearTimeout(timer.current);
 7               }
 8               timer.current = setTimeout(() => {
 9                  fun(lat, lng);
10                  console.log(timer.current);
11                  timer.current = null
12              }, delay);
13          }
14      }
15  //创建触发函数
16      const handleChangeMarkers = useDebounce((lat: number, lng: number) => {
17          const newMarkers = markers?.map((marker: any, index: number) => {
18              if (index + 1 == currentPoint) {
19                  const newPosition = marker.getPosition()
20                  newPosition.lat = lat
21                  newPosition.lng = lng
22                  marker.setPosition(newPosition)
23              }
24              return marker
25          })
26          setChangeMarkers(newMarkers)
27      }, 500)
28 
29 handleChangeMarkers(113.625309,34.746277)