函数节流和函数防抖

1. 什么是函数节流？

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

• 比如有个需要频繁触发的函数，出于优化性能的角度，我们让他在规定的时间之内，只让函数触发的第一次生效，后面就不让他生效

/**
 * 节流函数
 * @para fn 要被节流的函数
 * @para delay 规定的时间
 */
function throttle (fn, delay) {
    //记录上一次函数触发的时间
    let lastTime = 0;
    //闭包
    return function () {
        //记录当前函数触发的时间
        let nowTime = Date.now();
        //判断如果当前执行的时间大于上一次执行的时间，才执行该函数
        if (nowTime - lastTime > delay){
            fn().call(this);//嵌套多层函数，为了让this指向没有问题，将当前函数的this传入到fn
            //同步时间
            lastTime = nowTime;
        }
    }
}
//测试
document.onscroll = throttle (function () {
    console.log('scroll事件被触发了' + Date.now());
}, 200);

测试之前，将浏览器body调成500%，使其出现滚动条，按f12观察控制台输出情况。

<style>
    html , body {
        height: 500%;
    }
</style>

那么通过节流函数呢，我们可以极大的减少函数调用的次数，从而去优化性能。

2. 什么是函数防抖？

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

/**
 * 防抖函数
 * @para fn 要被防抖的函数
 * @para delay 规定的时间
 */
function debounce(fn, delay) {
    //记录上一次的延时器
    let timer = null;
    //闭包
    return function () {
        //清除上一次的延时器
        clearTimeout(timer);
        //设定一个新的延时器
        timer = setTimeout(function () {
            fn().apply(this);//修正this指向
        },delay);
    }
}

//测试
document.getElementById('btn').onclick = debounce(function () {
    console.log('点击事件触发' + Date.now());
},1000);

测试之前加一个按钮，来绑定事件。

<button id = "btn">按钮</button>

打开浏览器，调出控制台，点击按钮的时候，明显出现了延迟，连续点击按钮，事件不触发，一定要等到，点完一次之后，过了一秒再点击，才会重新触发。那么通过防抖函数，也能实现性能的优化。