防抖

需要场景：

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

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

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

<button id="save">保留</button>
<script>
        // 防抖
        let btn = document.getElementById('save');
        let timer = null;
        btn.onclick = function (){ 
            // 只有触发该事件，立刻进行这个timer
            clearTimeout(timer)
            // 在1000ms 后再去执行其余操作
            timer = setTimeout(() => {
                  console.log('提交申请');
            }, 1000);
        }
</script>

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

// 创立一个 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被拖动过程中执行一个函数，为了简化代码，我这里以鼠标在挪动过程中触发某个动作（事件/办法/函数…）作为例子。
试比拟如下两个例子

实现节流前：

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);
    }
}