// 防抖點選之後過了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 ,快取函式，否則就會出現， 防抖節流失效，函式被建立多次的現象