第一 防抖就是我們設置一個調用時間，點擊后設置時間開始倒計時，如果再次點擊會重新倒計時
? npm或yarn安裝：
?

npm install lodash

<template><div @click="debouncedInputHandler"><button>打印</button><!-- 輸入框，例如：<input type="text" v-model="inputValue" /> --><!-- 注意：這里的 v-model 和 input 事件是為了示例，實際使用時請根據需求調整 --></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import _ from 'lodash';// 定義一個響應式變量來存儲輸入框的值（實際使用時需要添加輸入框和 v-model 綁定）
const inputValue = ref('');// 定義原始的輸入處理函數
const inputHandler = () => {console.log("新增成功");// 在這里處理輸入事件
};// 使用 lodash 的 debounce 函數創建防抖函數
let debouncedInputHandler;onMounted(() => {debouncedInputHandler = _.debounce(inputHandler, 1000); // 每 300 毫秒最多調用一次
});// 監聽輸入事件，并調用防抖后的處理函數
// 注意：這里的監聽應該是通過 v-model 綁定的 input 事件，或者你可以手動添加一個 input 事件監聽器到模板中的輸入框上
// 由于 <script setup> 不支持直接訪問 DOM，因此通常你會使用 v-model 或通過 ref 引用 DOM 元素并手動添加事件監聽器
// 但為了簡化示例，這里假設你已經有了某種方式來觸發這個防抖函數
// 在實際代碼中，你應該將下面的代碼替換為對輸入框的 @input 事件的監聽，例如：<input @input="debouncedInputHandler" v-model="inputValue" />
// 由于模板部分已經假設了 @input 綁定，這里我們不再重復添加事件監聽器代碼。// 在組件卸載前取消防抖函數
onBeforeUnmount(() => {if (debouncedInputHandler.cancel) {debouncedInputHandler.cancel();}
});
</script><!-- 注意：這里的模板部分需要根據你的實際輸入框進行調整 -->
<!-- 例如： -->
<!-- <template> -->
<!--   <input type="text" v-model="inputValue" @input="debouncedInputHandler" /> -->
<!-- </template> -->