js 防抖与节流

前言

• 高频率的触发某一事件，可能导致响应反应不过来，出现页面卡顿、假死现象，所以引入防抖（debounce）与节流（throttle）
  • 
• 本质是优化高频率执行代码的手段
  • 浏览器onresize不断的进行，浪费资源，降低前端性能

定义

防抖：n秒后执行事件，若n秒内被重复触发，则重新计算--重在清零

节流：n秒内只运行一次，若n秒内重复触发，只有一次生效--重在加锁

代码实现

function debounce(fn, time){
    var timeout = null
    let arg = arguments
    return function() {
        clearTimeout(timeout) //时间清零
        timeout = setTimeout(() => {
            fn.apply(this, arg)
        }, time)
    }
}

function throttle(fn, time) {
    let temp = false //锁住
    return function() {
        if(temp) {
            return 
        } else{
            temp = true
            setTimeout(() => {
                temp = false
                fn.apply(this, arguments)
            }, time)
        }
    }
}

应用场景

防抖是在连续的事件中，只需要触发一次回调

•  搜索框输入，只需要用户最后一次的输入
•  手机号、邮箱验证输入检测
• 窗口reseize，窗口调整完成后，计算窗口大小

节流是间隔一段时间执行一次回调

• 滚动加载、加载更多或滚动到底部监听
• 搜索框，搜索联想功能