You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
938 B
47 lines
938 B
4 years ago
|
import { useState, useEffect, useRef, useCallback } from 'react'
|
||
|
|
||
|
/**
|
||
|
* useTimeout
|
||
|
*
|
||
|
* @param {Function} cb - callback function inside setTimeout
|
||
|
* @param {number} delay - delay in ms
|
||
|
* @param {boolean} [immediate] - determines whether the timeout is invoked immediately
|
||
|
*
|
||
|
* @return {Function}
|
||
|
*/
|
||
|
export function useTimeout (cb, delay, immediate = true) {
|
||
|
const saveCb = useRef()
|
||
|
const [timeoutId, setTimeoutId] = useState(null)
|
||
|
|
||
|
useEffect(() => {
|
||
|
saveCb.current = cb
|
||
|
}, [cb])
|
||
|
|
||
|
useEffect(() => {
|
||
|
if (timeoutId !== 'start') {
|
||
|
return
|
||
|
}
|
||
|
|
||
|
const id = setTimeout(() => {
|
||
|
saveCb.current()
|
||
|
}, delay)
|
||
|
|
||
|
setTimeoutId(id)
|
||
|
|
||
|
return () => {
|
||
|
clearTimeout(timeoutId)
|
||
|
}
|
||
|
}, [delay, timeoutId])
|
||
|
|
||
|
const startTimeout = useCallback(() => {
|
||
|
clearTimeout(timeoutId)
|
||
|
setTimeoutId('start')
|
||
|
}, [timeoutId])
|
||
|
|
||
|
if (immediate) {
|
||
|
startTimeout()
|
||
|
}
|
||
|
|
||
|
return startTimeout
|
||
|
}
|