防抖、节流

概念

防抖：在一段时间内多次调用只触发一次。如果多次调用，则会重新计时（可调用倒计时）

节流：多次调用只会在一段时间内触发一次，可以稀释执行的频率

示例

下面是一个防抖和节流的示例代码：

// 防抖函数
function debounce(fn, delay) {
  let timerId = null;
  return function(...args) {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 节流函数
function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

在 vue 中的应用

<script setup>
import { ref } from 'vue';

const num = ref(0);

function count () {
  num.value += 1
}

function debounce(cb, time) { 
  let timeout;
  return function () {
    const ctx = this;
    const args = [...arguments];
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      cb.apply(ctx, args)
    }, time);
  }
}
// 下面的v-on是双引号代表了一个字符串，如果写法为 @click="debounce(count, 1000)"，相当于执行了debounce函数返回了一个function函数，但是没有执行这个function函数。但是如果这样写 @click="debounce(count, 1000)()" 就是在@click这个作用域里面执行function()，导致的结果就是每次都新生成一个function()，防抖失效
// 点击按钮后会触发click
const click = debounce(count, 1000)

</script>

<template>
  <div>Count：{{ num }}</div>
  <a-button type="primary" @click="click">防抖</a-button>
</template>

在 react 中的应用

import {useState} from 'react';

function App() {
  let [state, setState] = useState(0)
  
  function count() {
    setState(state => state + 1)
  }
  
  const click = (cb, time) => {
    let timeout;
    return function () {
      const ctx = this;
      const args = [...arguments];
      if (timeout) clearTimeout(timeout)
      timeout = setTimeout(() => {
        cb.apply(ctx, args)
      }, time);
    }
  }

  return (
    <div className="App">
      <div>点击数{ state }</div>
      {/* 下面的click()是js表达式会调用返回一个function()方法 */}
      <button onClick={click(count, 1000)}>防抖</button>
    </div>
  );
}

export default App;