js节流与防抖

节流和防抖这是两个类似又有些不同的优化方案

日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。即：在指定时间之内，让函数只触发一次。
防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。即：对于一定时间段的连续的函数调用，只让其执行一次。

节流(debounce)

throttle在英语里的意思是节流阀，顾名思义，设置一个阀值（制定一个时间），在这个阀值或者时间之内，函数只会执行一次。

实现函数节流我们主要有两种方法：时间戳和定时器

举个例子，我们执行页面滚动的时候，比如在react里面，可能每次滚动都会触发一次render，这样严重影响性能，甚至会造成浏览器卡死。如果我们设置一个300ms的时间阀，那么在这段时间内，滚动时候只会触发一次render.

同样的，当我们拖拽某个元素的时候，会每次判断mousemove时跟位置相关的信息，每次都会执行相关的计算和判断，这种情况就和滚动时候一样，如果设置一个时间阀，那么就可以避免由于大量执行事件计算而造成的性能下降。

• 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
• 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

function throttle(fn,times = 300){
    let bool = true
    return function(){
        if(!bool){
            return false
        }
        bool = false
        setTimeout(()=>{
            bool = true
            fn.apply(this,arguments)
        },times)
    }
    
}

或者

onresize问题，页面满屏布局，模块很多dom结构也相对复杂。所以在窗口频繁快速变化大小的时候页面反应异常卡顿。

//问题解决的原理就是事件节流

window.onresize = () => {
      console.log('resize')
}

解决办法如下：

 let timer = null
          window.onresize = () => {
                console.log(timer)
                if (!timer) {
                    timer = setTimeout(() => {
                        callBack()
                        timer = null
                    }, 1000)
                }
            }

            function callBack() {
                console.log('resize')
            }

封装起来：

//封装前我们先思考一下，首先既然是封装那么事件不一定都是onersize、间隔时间得有用户设置、callBack得是用户写。

**其实我们只关心callBack，和执行间隔时间，恰好事件都有回调

            function callBack() {
                console.log('resize')
            }

            function throttle(callBack, time) {
                let timer = null
                //timer状态要常驻内存，这里做了一个闭包
                return function() {
                    if (!timer) {
                        timer = setTimeout(() => {
                            callBack()
                            timer = null
                        }, time)
                    }
                }
            }

            window.addEventListener('resize', throttle(callBack, 1000), false)

 

防抖（throttle）

防抖实现起来的思路是，用闭包保存执行的函数，多次执行的时候把上一个执行的函数清除掉，然后再次创建一个新的函数。这样在间隔时间内还有事件触发的话，不会执行之前的函数，这么一来，函数真正的执行就是最后一次事件触发。

实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return

function debounce(fn,times){
    let timeout = null
    return function(){
        clearTimeout(timeout)
        timeout = setTimeout(()=>{
            fn.apply(this,arguments)
        },times)
    }
}

总结：

函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

两者都是在密集调用的过程中灵活使用setTimeout函数来对频繁触发的事件进行控制和优化。