函数节流与函数防抖

摘要：函数节流和函数防抖两个都是优化高频率执行js代码的一种手段。

1，函数节流

函数节流 : 单位时间内，频繁触发事件，只会触发一次

经典应用场景 ：降低高频事件触发频率

滚动条事件：onscroll 鼠标移动：onmousemove

函数防抖流程 ：

(1) 声明全局变量记录本次触发时间

(2) 每一次触发事件, 获取当前时间  

(3) 判断 当前时间-上一次触发时间>=节流间隔时间

(4) 存储本次触发事件，用于下一次判断

2.函数防抖

防止函数在极短的时间内反复调用，造成资源的浪费。
页面上的某些事件触发频率非常高，比如滚动条滚动、窗口尺寸变化、鼠标移动等，如果我们需要注册这类事件，不得不考虑效率问题，又特别是事件处理中涉及到了大量的操作。

函数防抖流程：

（1）声明全局变量timeID存储定时器ID

（2）每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中

一、函数节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

具体代码如下

function throlle(callback,time){
            let lasttime = new Date().getTime();
            return function(){
                let now = new Date().getTime();
                if(now - lasttime > time){
                    callback();
                    lasttime = now;
                }
            }
        }
        window.onscroll = throlle(function(){
            console.log("调用了1次");
        },500);

效果如下：

函数节流

二、函数防抖

在事件被触发t秒后再执行回调，如果在这t秒内又被触发，则重新计时。

具体代码如下

 function debounce(callback,time=300){
        let t;
        return function(){
            clearTimeout(t);
            t = setTimeout(callback,time);
        }
    }
    window.onscroll = debounce(function(){
        console.log("调用了一次");
    })

具体效果如下：

函数防抖

三、两者的区别

1.函数防抖和函数节流都是防止某一时间频繁触发，但是它们的原理不一样；
2.函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行；