react hooks实现防抖节流的方法小结

import React from "react";
 
function ThrotShak() {
  let shak;
 
  const service = (data) => {
    console.log('向服务端发送数据', data);
  }
 
  const handleChange = (e) => {
    if (shak) {
      clearTimeout(shak)
    }
 
    shak = setTimeout(() => {
      service(e.target.event);
    }, 3000)
  }
 
  return (
      <div style={{ flex: 1, border: '1px solid blue', padding: '3px' }}>
        <div>防抖：多次触发执行最后一次</div>
        <input onChange={handleChange} />
      </div>
  )
}
 
export default ThrotShak;

import React from 'react';
import { debounce } from 'lodash';
 
function ThrotShak(){
  const service = (data) => {
    console.log('向服务端发送数据', data);
  }
 
  const handleChange = () => debounce(service, 500);
 
  return (
    <input type="text" onChange={handleChange} />
  );
};
 
export default ThrotShak;

import React from "react";
 
function ThrotShak() {
  const service = (data) => {
    console.log('向服务端发送数据', data, new Date());
  }
  let throt;
 
  function handleChange() {
    if (throt) {
      return ;
    }
    
    throt = setTimeout(() => {
      service();
      throt = null;
    }, 3000)
  }
 
  return (
      <div  style={{ flex: 1, border: '1px solid blue', padding: '3px' }}>
        <div>节流： 持续触发事件时，每过n钟执行一次</div>
        <input onChange={handleChange} />
      </div>
  )
}
 
export default ThrotShak;

import React from 'react';
import { throttle } from 'lodash';
 
function ThrotShak(){
  const service = (data) => {
    console.log('向服务端发送数据', data);
  }
 
  const handleChange = () => throttle(service, 500);
 
  return (
    <input type="text" onChange={handleChange} />
  );
};
 
export default ThrotShak;