Echarts创建中国3D地图

函数防抖（debounce）

应用场景

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存

实现方法，防抖重在清零

function debounce(f, wait){
    let timer
    return (...args) => {
        clearTimeout(timer)
        timer = setTimeout(() => {
            f(..args)
        }, wait)
    }
}

函数节流（throttle）

应用场景

• scroll事件，每隔一秒计算一次位置信息等
• 浏览器播放事件，每隔一秒计算一次进度信息等
• input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求

实现方法，节流重在开关锁

function throttle(f, wait){
    let timer
    return (..args) => {
        if (timer) { return }
        timer = setTimeout(() => {
            f(..args)
            timer = null
        }, wait)
    }
}

总结

• 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误触发多次。代码重在清零clearTimeout
• 节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁timer=timeout；timer=null