JavaScript中的防抖与节流、在react class及hook中使用防抖与节流

函数防抖：函数被触发后过一段时间再执行，如果在这段时间内又被触发，则重新计时，即将多次高频操作优化为只在最后一次执行。应用场景为用户连续输入，只需要在输入结束后做一次校验即可，比如input搜索或校验。简而言之，就是在input请求时使用防抖。

function debounce(func, ms = 1000) { let timer; return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func.apply(this, args) }, ms) } } // 测试
const task = () => { console.log('run task') } const debounceTask = debounce(task, 1000) window.addEventListener('scroll', debounceTask)

 

函数节流：函数在一段时间内只能被触发一次，如果这段时间内被触发多次，则只有一次生效，即每隔一段时间执行一次，也就是降低频率，将高频操作优化成低频操作。应用场景为滚动条事件或窗口resize事件，通常每隔100-500ms执行一次。简而言之，就是在滚动条请求时使用节流。

function throttle(func, ms = 1000) { let canRun = true
  return function (...args) { if (!canRun) return canRun = false setTimeout(() => { func.apply(this, args) canRun = true }, ms) } } // 测试
const task = () => { console.log('run task') } const throttleTask = throttle(task, 1000) window.addEventListener('scroll', throttleTask)

 

防抖或节流一般使用：

import debounce from 'lodash/debounce' debounce(()=>search(value), 500)

 

在类组件中使用防抖或节流：

import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import { Input } from 'antd'; import throttle from 'lodash/debounce'; class Search extends React.Component { constructor(props) { super(props) this.handleSearch = throttle(this.handleOnChange, 200); } handleOnChange = (e) => { console.log(e.target.value) } render() { return ( <Input onChange={this.handleSearch} />
 ) } } ReactDOM.render( <Search />,
  document.getElementById('container'), );

 

在函数组件中使用防抖或节流，需要使用useCallback或useRef缓存变量和方法：

import React, { useCallback } from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import { Input } from 'antd'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; const Search = () => { const handleOnChange = (e) => { console.log(e.target.value) } const handleSearch = useCallback(throttle((e) => handleOnChange(e), 500), []) return (<Input onChange={handleSearch}  placeholder="Basic usage" />)
} ReactDOM.render(<Search />, document.getElementById('container'));

或

import React, { useRef } from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import { Input } from 'antd'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; const Search = () => { const handleOnChange = (e) => { console.log(e.target.value) } const handleSearch = useRef(throttle((e) => handleOnChange(e), 500)).current return (<Input onChange={handleSearch}  placeholder="Basic usage" />)
} ReactDOM.render(<Search />, document.getElementById('container'));

 

在函数组件里使用debounce，不使用lodash：

import { useEffect } from 'react'
function useDebounce(fn, delay, dep=[]) { useEffect(()=>{ let timer; timer = setTimeout(fn, delay); return ()=>clearTimeout(timer); }, [...dep] ) } export default useDebounce // 调用
useDebounce(()=>search(value), 500, [value])

或

import { useRef } from 'react'
function useDebounce(fn, delay) { const timer = useRef(null); return () => { clearTimeout(timer.current); timer.current = setTimeout(fn, delay); } } export default useDebounce // 调用
const debounceSearch = useDebounce(() => handleParams(params), 500) useEffect(()=>{debounceSearch()},[value]