函数的防抖和节流

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

一、函数节流

函数节流定义：

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

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

函数节流的原理：

用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 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