防抖和节流

防抖

        在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。这通常用于输入框搜索、窗口大小调整等场景，确保在用户停止输入或操作后才执行处理函数，以避免频繁的计算或请求。

//防抖
export function debounce(fn: Function, delay: number) {
  const timer = ref<any>(null)
  return function (...args: any[]) {
    if (timer.value) {
      clearTimeout(timer.value)
    }
    timer.value = setTimeout(() => {
      // ...args 传递 fn 上的参数
      fn && fn(...args)
    }, delay)
  }
}

方法调用 

<script setup lang="ts">
import { debounce } from '@/utils/toolbar'
// 搜索框调用 debounce 方法
const handleInput = debounce((value: string) => {
  console.log(value)
}, 700)
</script>

<template>
<el-input clearable @input="handleInput" />
</template>

 

节流

        在固定的时间间隔内只执行一次函数。这意味着，无论在这个时间间隔内触发多少次事件，函数都只会被执行一次。这通常用于控制滚动事件、鼠标移动事件等高频事件的响应频率。

// 节流
export function throttle(fn: Function, delay: number) {
  const flag = ref(true)
  return function (...args: any[]) {
    if (!flag.value) {
      return
    }
    flag.value = false
    setTimeout(() => {
      // ...args 传递 fn 上的参数
      fn && fn(...args)
      flag.value = true
    }, delay)
  }
}

 方法调用

<script setup lang="ts">
import { throttle } from '@/utils/toolbar'

// 调用 throttle 方法
const handleClick= throttle(() => console.log('throttle'), 1000)
</script>

<template>
<el-button type="primary" @click="handleClick">按钮</el-button>
</template>