节流--防抖

防抖

需求场景：

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

解决方案一：在请求前 设置按钮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);
    }
}