debounce useDebounce throttle useThrottle练习2

useDebounce

const useDebounce = <T>(value: T, interval: number = 200) => {
	const [debounceValue, setDebounceValue] = useState<T>(value)
	
	useEffect(() => {
		let timer = setTimeout(() => {
			setDebounceValue(value)
		}, interval)

		return () => {
			timer = null
			clearTimeout(timer)
		}
	}, [value, interval])

	return debounceValue
}

useThrottle

const useThrottle = <T>(value: T, interval: number = 200) => {
	const [throttleValue, setThrottleValue] = useState<T>(value)
	const startTimeRef = useRef<number>(Date.now())
	
	useEffect(() => {
		let timer
		const endTime: number = Date.now()
		const diffTime: number = startTimeRef.current - endTime
		const nextTime: number = interval - diffTime
		if (diffTime >= interval) {
			setThrottleValue(value)
			startTimeRef.current = Date.now()
		} else {
			timer = setTimeout(() => {
				setThrottleValue(value)
				startTimeRef.current = Date.now()
			}, nextTime)
		}

		return () => {
			timer = null
			clearTimeout(timer)
		}
	}, [value, interval])

	return throttleValue
}

Debounce

const debounce = (fn, interval) => {
	let timer
	return function (...args) {
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(() => {
			fn.apply(this, args)
			timer = null
			clearTimeout(timer)
		}, interval)
	}
}

throttle

const throttle = (fn, interval) => {
	let timer
	let startTime = Date.now()

	return function(...args) {
		let diffTime = Date.now() - startTime
		let nextTime = interval - diffTime
		if (timer) {
			clearTimeout(timer)
		}
		if (diffTime >= interval) {
			fn.apply(this, args)
			return
		}
		timer = setTimeout(() => {
			fn.apply(this, args)
			timer = null
			clearTimeout(timer)
		}, nextTime)
	}
}