Input 输入框的 防抖和节流 （闭包的应用）

// 防抖点击之后过了wait才响应，如果一直点，就一直没有响应，直到你停下来后，wait后执行。防抖是一进来就清，然后wait后再做
export function antishake<T>(fn: T, wait: number): () => void { //第一个参数是函数 第二个参数是毫秒值
  let timer: NodeJS.Timeout //声明一个变量来接收延时器 初始值为null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      typeof fn === 'function' && fn(...args) //调用这函数
    }, wait);
  }
}

// 节流， 每wait执行一次，如果你一直点，就过2s执行一次，过wait再执行一次。<br /> 节流是 一进来就先看有没有，有的话就啥都不做，没有的话再做 ，做完清
export function throttle<T>(fn: T, wait: number): () => void {
  let timer: NodeJS.Timeout | null //节点闸
  return function (...args) {
    if (timer) return //null false 不是null结果减少true 如果上传没有我就直接跳过 没有人我就上去
    timer = setTimeout(() => {
      typeof fn === 'function' && fn(...args) //调用这函数
      timer = null //做完之后重新关闭节点闸
    }, wait);
  }
}

以上是防抖 节流函数。

应用： Input 输入框， 输入框搜索

import React, { ChangeEvent, useCallback } from 'react';
import { Input, ConfigProvider, Button, } from 'antd';
import { antishake, throttle } from './utils/throttle';

const App = () => {
  // 加useCallback 用来缓存函数，不然input改变的时候，会创建多次 fetchSearchValue函数，里面的console也就会执行多次。就不能防抖了
  const fetchAntishake: (value: string) => void = useCallback(antishake((value: string) => {
    console.log(value, 'Antishake');
  }, 2000), []);

  const fetchThrottle: (value: string) => void = useCallback(throttle((value: string) => {
    console.log(value, 'Throttle');
  }, 2000), []);

  const onInputChange = (e: ChangeEvent) => {
    fetchAntishake((e.target as HTMLInputElement).value);
    fetchThrottle((e.target as HTMLInputElement).value);
  };
  const goTo = () => {
    console.log('2222222');
    window.open(`${window.origin}/testBiBao`, '_self'); // '_self _blank'
  };

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: 'red',
        },
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center', height: 800 }}>
        <Input placeholder="input search text" onChange={onInputChange} style={{ width: 500 }} />
        <br />
        <Button onClick={goTo}>跳转到闭包</Button>
      </div>
    </ConfigProvider>);
}
export default App;

以下是 执行结果。可以看到 节流执行了多次，防抖只执行一次

 

 注意： 在onChange里面调用函数，要使用useCallback ,缓存函数，否则就会出现， 防抖节流失效，函数被创建多次的现象