前端：性能优化之防抖与节流

前言：防抖和节流是前端应用开发中常见的两个功能，其原理都是利用闭包，缓存延迟时间。常用于窗口的resize、scroll、输入框内容校验等操作

防抖(debounce)

在函数需要频繁触发时，只有当有足够空闲的时间时，才执行一次。

比如说我们在使用百度、360浏览器搜索时，每次输入之后都有联想词弹出，
这个控制联想词的方法不可能是输入框内容一改变就触发的，
他一定是当你结束输入一段时间之后才会触发。
let timer
input.on('input', () => {
    clearTimeout(timer)
    // 停止输入 500 毫秒后开始搜索
    timer = setTimeout(() => {
    // 搜索
    }, 500)
})

节流(thorttle)

预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。

 我们平时在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，你会发现你点击的时候总有一阵时间它没反应，
 这里就应用到了节流，这是因为怕点的太快导致服务器或者系统崩溃。
 1 let isClick = false
button.on('click', () => {
    if (isClick) return
    isClick = true
    // 其他代码。。。
    // 每 10 秒只允许点击一次
    setTimeout(() => {
    isClick = false
    }, 10000)
})

防抖与节流之间的区别

在发生持续触发事件时，

防抖设置事件延迟并在空闲时间去触发事件；

节流是利用定时器将事件隔一定的时间触发一次。