防抖和节流

防抖

当持续触发事件时，一定时间段内没有再触发时间，时间处理函数才会执行一次，如果设定的时间到来之前，有一次触发了事件，就重新开始延时。

<script>
    function debounce(fn, wait) {
        var timeout = null;
        return function() {
            if(timeout !== null){
                clearTimeout(timeout);
            }
            timeout = setTimeout(fn, wait);

        }
    }
    // 处理函数
    function handle() {
        alert('我被点击了');
    }
    // 滚动事件
    document.getElementById('btn').addEventListener('click', debounce(handle, 1000));
</script>

注：这个按钮所注册的点击事件只有在1s之内没有再次点击该按钮才会执行弹框，如果点击了按钮之后1s之内再次点击按钮，则会以第二次按钮点击的时间为基准，往后延迟1s后执行。

函数节流

当持续触发时间时，保证一定时间段内只调用一次时间处理函数。

var processor={
        timeOutId :null,
        performProcessing:function () {
           alert('我被点击了');
        },
        process:function () {
            clearTimeout(this.timeOutId);
            var that = this;
            that.timeOutId = setTimeout( () =>{
                that.performProcessing();
            },100);
        }
    }
    var btn = document.getElementById('btn');
    btn.onclick = processor.process.bind(processor);

注：这个按钮的点击事件无论点击多少次，1s内只执行一次。

函数防抖与函数节流的区别

防抖的函数不保证一段时间内执行一次，如果再该段时间里面该事件持续被触发，那么这个事件永远不会执行。

函数节流则时一段事件内无论触发多少次事件，都只会响应一次该事件。