Vue3 обеспечивает защиту от сотрясений, одностраничный импорт, глобальный импорт и глобальное монтирование.

---

Код

const debounce = (fn: any, delay: number) => {
    
    
    let timer: any = undefined;

    return (item: any) => {
    
    
        if (timer) clearTimeout(timer);

        timer = setTimeout(() => fn(item), delay);
    }
};

export default debounce;

---

импорт одной страницы

// 防抖(单页面引用)
import debounce from '../../../utils/debounce';

---

Глобальный импорт

main.ts

import App from './App.vue';
import debounce from './utils/debounce';

const app = createApp(App);
app.config.globalProperties.$debounce = debounce;

---

использовать

HTML

<el-slider v-model="sliderValue" size="small" show-input @input="handleScheduleInput" />

---

использование одной страницы

let handleScheduleInput = debounce((val: number) => {
    
    
    console.log('滑块: ', val);
}, 1000 * 1);

---

глобальное использование

// 防抖(全局挂载)
let self = getCurrentInstance()?.appContext.config.globalProperties;

let handleScheduleInput = self?.$debounce((val: number) => {
    
    
    console.log('滑块: ', val);
}, 2000 * 1);