关于javascript:节流防抖

需要场景：

当用户频繁点击一个申请按钮时，如果不做任何解决，那么点了多少次，这个按钮绑定的申请事件就会执行多少次。

解决方案一：在申请前 设置按钮diable状态为true, 申请完结后设置disable状态false。

解决方案二：写一个防抖函数，比方点击这个按钮1秒后再去提交申请。

保留

另外附上我在理论我的项目中的案例

// 创立一个 debounce.js

/**
 * 防抖函数 （避免用户短时间频繁操作按钮）
 * @param fn 要执行的函数
 * @param delay 延迟时间（ms）
 */
export default function onDebounceFn(fn, delay = 300) {
    clearTimeout(window.debounceTimer);
    window.debounceTimer = setTimeout(() => {
        fn(); 
    }, delay);
}

// 在vue组件中

/**
 * 搜寻事件
 */
onSearch() {
    this.searchKeyWord = this.searchInputValue;
    this.currentPage = 1;
    // onDebounceFn曾经绑定在了实例原型上，这里间接应用this.$onDebounceFn
    this.$onDebounceFn(this.getLiveList);
},

需要场景：

举例：拖动一个div,在div被拖动过程中执行一个函数，为了简化代码，我这里以鼠标在挪动过程中触发某个动作（事件/办法/函数&＃8230;）作为例子。
试比拟如下两个例子

实现节流前：

window.addEventListener("mousemove",mousemoveFn);

function mousemoveFn() { 
    console.log("鼠标正在挪动中..."); // 触发内容
}

实现节流后：

window.addEventListener("mousemove",mousemoveFn);

let flag = true;

function mousemoveFn() { 
    if(flag){
        flag = false
        setTimeout(() => {
            console.log("鼠标正在挪动中...");
            flag = true
        }, 500);
    }
}