debounce useDebounce throttle useThrottle练习

健忘 健忘 健忘

useDebounce

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

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

	return debounceValue
}

debounce

const debounce = (fn: Function, interval: number) => {
	let timer = null
	if (typeof fn !== "function") {
       throw new TypeError("Expected a function");
	}
	
	return function(...args) {
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
			fn.apply(this, args)
			timer = null
			clearTimeout(timer)
		}, interval)
	}
}

useThrottle

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

throttle

const throttle = (fn: Function, interval: number) => {
	let timer
	let startTime: number = Date.now()
	
	return function (...args) {
		if (timer) {
			clearTimeout(timer)
		}

		let endTime: number = Date.now()
		const diffTime: number = endTime - startTime
		const nextTime: number = interval - diffTime
		if (diffTime >= interval) {
			startTime = Date.now
			fn.apply(this, args)
		} else {
			timer = setTimeout(() => {
				startTime = Date.now()
				fn.apply(this. args)
				timer = null
				clearTimeout(timer)
			}, nextTime)
		}
	}
}