函数的防抖和节流

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。

 一、函数节流

函数节流定义：

一个函数执行一次后，只有大于设定的执行周期后才会执行第二次

有个需要频繁触发函数，处于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效

函数节流的原理：

用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳

实际使用场景 ：

典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

resize、scroll、mousemove等事件触发监听

实例代码：

<script>
    /*fn：要被节流的函数   delay：规定的时间 */ 
function throttle(fn,delay) { 

//记录上一次函数 触发的时间 
　　var lastTime=0; 
　　return function () { 
　　　　//当前函数 触发的时间 
　　　　var nowTime=Date.now(); 
　　　　//闭包中使用lastTime变量，闭包会始终将变量的值保存在内存中 
　　　　if(nowTime-lastTime>delay){ 
　　　　fn(); 
　　　　//同步时间 lastTime=nowTime;
　　　　  } 
 　　} 
}
　　//实例：每隔200ms触发一次节流函数
    document.onscroll=throttle(function () {
        console.log("scroll事件被触发了"+Date.now());
    },200)
</script>

二、函数防抖

函数防抖：

一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效

实现原理：

函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。

实际应用场景：

典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

代码实现：

<script>
   //fn：需要防抖的函数    
   //防抖需要不停地清除计时器，最后在计时器结束后触发fn来达到效果。

 function debounce(fn,delay) {
        //记录上一次的延时器
        var timer=null;
        return function () {
            //清除上一次延时器
            clearTimeout(timer)
            //重新设置 新的延时器
            timer=setTimeout(function () {
                fn.apply(this);
            },delay)
        }
    }
    //test
    document.getElementById('btn').onclick=debounce(function () {
        console.log('点击事件被触发了'+Date.now())
    },1000)
</script>

转载：

作者：fozero

文章出处：https://www.cnblogs.com/fozero