js防抖和节流的用例

防抖

高频事件触发，但 n 秒内函数只执行一次，如果 n 秒内又触发了事件，则重新计算时间

function debounce(fn, wait) {
    var time = null;
    return function() {
        clearTimeout(time)
        time = setTimeout(() => {
            fn.apply(this, arguments)
        }, wait);
    }
}

function demo() {
    console.log('防抖啦')
}
// 用句柄事件绑定调用debounce事件，所以this为div节点对象
document.querySelector('div').addEventListener('scroll', debounce(demo, 1000))

用例：

1. 电梯检测到有人进入，延迟10秒关门，如果10秒内有人进入，则继续延迟10秒关门，直到10秒内无人进入
2. 快速修改购物车商品数量，只有停顿超过规定的时间，才会向后端发送数据
3. 搜索框输入，停顿后再发送 ajax 请求
4. 用户名、手机号、邮箱等输入验证
5. 容器或浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染

节流

高频事件触发，但 n 秒内函数只执行一次，相当于稀释函数的执行频率

function throttle(callback, delay) {
    var previous = 0;
    return function() {
        var now = +new Date();
        if (now - previous > delay) {
            callback.apply(this, arguments);
            previous = now;
        }
    }
}

function getUserAction() {
    console.log(`每1秒内打印一次`)
}
document.querySelector('div').addEventListener('click', throttle(getUserAction, 1000))

用例

1. 拖动元素，mousemove 函数会触发多次，如果回调函数业务复杂，会影响性能，此时使用js节流，如10ms触发一次回调，可大大减少性能开支
2. 鼠标拖动调整容器大小
3. 内容滚动