js函数防抖和函数节流及其使用场景

目录

一、什么是函数防抖和函数节流

1、函数防抖（debounce）

2、函数节流（throttle）

 二、总结

---

一、什么是函数防抖和函数节流

  防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，本质都是某些代码不可以在没有间断的情况下重复执行。

1、函数防抖（debounce）

如果一个事件被频繁的执行了多次，并且间隔时间过短，则函数防抖则可以使用定时器来控制事件，只执行最后触发的一次，可以把多个顺序的调用合并成为一次。 

例（代码仅供参考） :

function debounce(callback,time=300){
     let t;
     return function(){
        //事件触发，清除t重新开始计时
        clearTimeout(t);
        t=setTimeout(callback,time);
    }
}

window.onscroll=debounce(function(){
    console.log("调用了一次");
},500);

1、当第一次发生滚动条事件时，即刚进入页面创建了一个定时器，在5s之后运行代码

2，当第二次发生滚动条事件时，会清除之前的定时器并且重新设置一个

3，如果前一个定时器已经执行过了，这个操作就不会执行，没有任何意义

4，当前一个定时器没有执行的时候，就是将它替换成一个新的定时器

5，定时器时间可以自己设置，也可以在写抖动时写入默认时间

2、函数节流（throttle）

如果一个事件被频繁的调用很多次，函数节流可以按照固定的频率去执行相应的事件处理方法，函数节流报纸一个事件一定时间内只能执行一次，且执行的是第一次。 

例（代码仅供参考）：

//函数节流
function throlle(callback,time){
    //上次执行函数的时间
    let lasttime=new Date().getTime();
    return function(){
        //获取当前时间，转换为时间戳
        let now=new Date().getTime();
        //将当前时间和上次执行时间戳进行比较，符合条件就设置当前时间为上次执行时间，并且执行函数
        if(now-lasttime>time){
            callback();
            lasttime=now;
        }
    }
}

//每5s执行一次
window.onscroll=throlle(function(){
    console.log("调用一次");
},500);

 二、总结

函数防抖和函数节流本质上都是为了解决一个事件过于频繁执行存在的，但函数节流是在一定时间内只执行一次，控制时间，而函数防抖是在频繁触发事件的情况下，只有足够的空间时间是，才执行一次代码。

看到这里的可以点点赞嘛，谢谢大家！