js节流与防抖

1.什么是防抖和节流？如何实现？

函数防抖:函数防抖是也优化高频率执行js代码的一种手段可以让被调用的函数在一次连续的高频操作中只被调用一次

作用：减少代码执行次数, 提升网页性能

应用场景：oninput / onmousemove / onscroll / onresize 等事件

function debounce(fn, delay){
    let timer = null
    return function(){
        // 设置了定时器就清空这个定时器，没有就去设置定时器
        timer && clearTimeout(timer)
        // 获取debounce执行作用域的this
        let _this = this
        // 获取参数
        let args = arguments
            
        timer = setTimeout(function(){
            fn.apply(_this, args)
        }, delay)
    }
}

函数节流:函数节流是优化高频率执行js代码的一种手段可以减少高频调用函数的执行次数

作用：减少代码执行次数, 提升网页性能

应用场景：oninput / onmousemove / onscroll / onresize 等事件

function throttle(fn, delay){
    let timer = null
    return function (){
        // 如果已经有定时器了，那么就退出
        if(timer) return
        // 获取debounce执行作用域的this
        let _this = this
        // 获取参数
        let args = arguments
        
        timer = setTimeout(function(){
            // 改变执行函数内部的this指向debounce执行作用域的this，并把参数传给执行函数
            fn.apply(_this, args)
            // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
            timer = null
        }, delay)
    }
}

函数节流和函数防抖区别

函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能只执行3-4次)

函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)