vue3、TS 按钮防抖

为什么要做按钮防抖

	因为有个时候可能网络比较慢，响应比较慢，用户就以为没有点上，就会一直狂点，就会发起多次请求，导致请求资源的浪费。
	还有一种情况就是用户恶意点击，造成多次的请求发起，也造成了资源浪费。

什么是防抖

	触发高频事件后，在n秒内只会执行一次，如果在n秒内再次触发，则会重新计时。

vue3 防抖实现

<template>
	 <div class="btn-left" @click="trigger('防抖')">防抖</div>
</template>


setup() {
	const timer: NodeJS.Timeout | null = null

    // 业务代码
    const changeIsOpen = (key: String) => {
		console.log(key, '业务代码')
    }
    /**
     * @explain: 防抖
     * @param {*} key
     */    
    const trigger = (key: String) => {
     let firstClick: Boolean = !timer;
      if (firstClick) {
      // 第一次会执行
      changeIsOpen(key)
     }
      // 如果定时器存在清空定时器
     if (timer) {
       clearTimeout(timer);
     }
      // 设置定时器，此时firstClick会变为false，规定时间后time才会为null
     timer = setTimeout(() => {
        timer = null;
       // 如果firstClick为true，执行
        if (!firstClick) {
        //  fn(...arguments);
          changeIsOpen(key)
       }
     }, 1000);
    }

	// 页面销毁前 清除定时器
    onBeforeUnmount(() => {
      clearTimeout(timer)
      timer = null
    })
	
	return {
		timer,
		changeIsOpen,
		trigger
	}
}