当前位置: 首页 > news >正文

debounce、throttle、useDebounce、useThrottle

直接使用lodash的debounce会出现以下报错信息

This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

在这里插入图片描述

debounce

const debounce = (fn: Function, interval: number) => {let timer = nullif (typeof fn != 'function') {throw new TypeError(FUNC_ERROR_TEXT);}return function(...args) {if (timer) {clearTimeout(timer)}args.forEach((item: any) => {if (item.__proto__.constructor.name === "SyntheticEvent") {item.persist()}})timer = setTimeout(() => {fn.apply(this, args)timer = nullclearTimeout(timer)}, interval)}
}

throttle

const throttle = (fn: Function, interval: number) => {let timerlet startTime = new Date()if (typeof fn != 'function') {throw new TypeError(FUNC_ERROR_TEXT);}return function(...args) {if (timer) {clearTimeout(timer)}args.forEach((item: any) => {if (item.__proto__.constructor.name === "SyntheticEvent") {item.persist()}})let endTime = new Date()const diffTime = endTime - startTimeconst nextTime = interval - (endTime - startTime)if (diffTime >= interval) {fn.apply(this, args)startTime = new Date()} else {timer = setTimeout(() => {fn.apply(this, args)startTime = new Date()timer = nullclearTimeout(timer)}, nextTime)}}
}

使用

    const valueChange = useCallback(debounce((e) => {const value = e.target.valuesetVal(value)}, 500), [])const valueChange2 = useCallback(throttle((e) => {const value = e.target.valuesetVal(value)}, 1000), [])

useDebounce

type UseDebounce = <T>(value: T, interval: number) => Tconst useDebounce: UseDebounce = <T>(value: T, interval: number = 300) => {const [debouncedValue, setDebouncedValue] = useState<T>(value)useEffect(()=>{const timer = setTimeout(()=>{setDebouncedValue(value)}, interval)return () => {clearTimeout(timer)}},[value, interval])return debouncedValue
}

使用

import React, { useCallback, useState, useEffect, ChangeEvent } from "react"
import { Input } from "antd"
import { InputProps } from "antd/lib/input"
import {useDebounce} from "../utils/tool";interface InputProps2 extends InputProps{onChange: (value: string) => voidvalue?: numberinterval?: number
}const DebounceInput = (props: InputProps2) => {const { onChange, value = "", interval = 0, ...rest } = propsconst [val, setVal] = useState(value)const newValue = useDebounce<string>(val, interval)const valueChange = useCallback((e) => {const value = e.target.valuesetVal(value)}, [])useEffect(() => {onChange && onChange(val)}, [newValue])return (<InputonChange={valueChange}value={val}{...rest}/>)
}export default DebounceInput

useThrottle

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

使用

import React, { useCallback, useState, useEffect, ChangeEvent } from "react"
import { Input } from "antd"
import { InputProps } from "antd/lib/input"
import {useThrottle} from "../utils/tool";interface InputProps2 extends InputProps{onChange: (value: string) => voidvalue?: numberinterval?: number
}const ThrottleInput = (props: InputProps2) => {const { onChange, value = "", interval = 0, ...rest } = propsconst [val, setVal] = useState(value)const newValue = useThrottle<string>(val, interval)const valueChange = useCallback((e) => {const value = e.target.valuesetVal(value)}, [])useEffect(() => {onChange && onChange(val)}, [newValue])return (<InputonChange={valueChange}value={val}{...rest}/>)
}export default ThrottleInput

http://www.taodudu.cc/news/show-6309777.html

相关文章:

  • js实现 throttle 和 debounce
  • ‘underscore系列之throttle“‘
  • throttle在程序中的作用
  • debounce与throttle区别
  • 关于IO throttle
  • Python -- 限流 throttle
  • 函数的节流(throttle)
  • js 中 throttle 的实现
  • JavaScript 节流函数 throttle 详解
  • 节流(Throttle)与防抖(Debounce)区别与demo实现+ 图解
  • 网络分层,图,易懂--对应 应用层、数据传输层、网络层、数据链路层
  • 【图论基础】分层图
  • 数据分层(方法论)
  • 分层图[模板]
  • 食物链(分层图?)
  • 分层图总结(例题)
  • 拆点/分层图的使用
  • 分层架构简图
  • 数据分层简述
  • 简谈分层图
  • 数据流图-2(分层数据流图)
  • 流程图分级、分类、分层
  • 什么是分层架构
  • 链路聚合的原理以及配置
  • 链路聚合—3种模式
  • 链路聚合及配置
  • 交换机之间的链路聚合
  • 链路聚合与链路捆绑
  • 链路聚合和LACP
  • 链路聚合(二层链路聚合划分)