节流与防抖初识

基于防抖和节流的性能优化

当下网页中的交互越来越多，很多高频时间带来的性能问题，是一个绕不过去的坎。优化这些高频事件，防抖与节流必不可少。

防抖函数与节流函数

• 防抖：就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
• 节流：就是指连续触发事件但是在一段时间中只执行一次函数
• css重绘
• css回流

debounce(防抖)

防抖分为立即防抖和非立即防抖

非立即防抖：触发事件后函数不会立即执行，而是在n秒之后执行，如果n秒之内又触发了事件，则会重新计算函数执行时间。
立即防抖：触发事件后会立即执行，然后n秒内不触发事件才会执行函数的效果

这是一个防抖代码

    function debounce(fn, wait) {   // 防抖
        let timmer = null ;
        return function(){
            var args = arguments; 
            var now = !timmer;
            timmer &&  clearTimeout(timmer) // 当timmer存在清除
            timeer = setTimeout(()=>{
                // fn.apply(this,args); 
                timmer = null;
            },wait) ;
            if(now){
                fn.apply(this,args);
            }
        }
    }

throttle(节流)

节流分为时间戳和定时版本

时间戳版节流

    function jl(fn,wait){
        let last = 0
        return function(){
            var args = arguments;
            var now =  Date.now()
            if(now - last > wait){
                fn.apply(this,args)
                last = now;
            }
        }
    }