vue中使用防抖函數

工具類

/**
 * 防抖
 * @param {Function} func 要執行的回調函數 
 * @param {Number} wait 延時的時間
 * @param {Boolean} immediate 是否立即執行 
 * @return null  
 */
let timeout: any;
export default {
    debounce(func: any, wait = 300, immediate = false) {
        // 清除定時器
        if (timeout !== null) clearTimeout(timeout);
        // 立即執行，此類情況一般用不到
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function () {
                timeout = null;
            }, wait);
            if (callNow) typeof func === 'function' && func();
        } else {
            // 設置定時器，當最后一次操作后，timeout不會再被清除，所以在延時wait毫秒后執行func回調方法
            timeout = setTimeout(function () {
                typeof func === 'function' && func();
            }, wait);
        }
    }
}

vue中使用

import tool from "@/utils/tool";

const clkBtn = () => {
      let fn = async () => {
          console.log(1)
      };
      tool.debounce(fn, 2000, true);
    };