Javascript频繁操作性能优化——防抖和节流

在前端开发中，会有一部分用户的行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很有可能造成页面卡顿，甚至浏览器崩溃。函数节流（throttle）和函数防抖（debounce）就是为了处理类似需求应运而生的。

一、防抖 
函数防抖就是函数在频繁需要触发情况时，只有等足够空闲的时间才去执行一次。好像公交车司机等人都上车以后才出站一样。 
比如我们在做搜索框的时候，要根据搜索的内容进行请求查找出相关的内容，此时我们在给输入框绑定oninput事件而不做防抖处理的话，每输入一个字就会进行一次处理。比如我想搜索abc，那就会输入a的时候触发请求数据一次，ab的时候触发请求数据一次，然后才是abc，但往往前两次是不需要的，而且频繁的进行请求也会影响性能，此时我们就需要进行防抖处理。

    <input type="text" name="search" id="inp">
    <script>
        var inp = document.getElementById('inp');
        inp.oninput = debounce(handle, 300);

        function handle(e) {
            console.log(this.value, e);
        }

        /*
            防抖函数：
            handle：需要调用的函数
            delay：延迟时间
        */
        function debounce(handle, delay) {
            var timer = null;
            return function () {
                var _this = this, _arg = arguments;//谁调用此方法,this就指向谁
                clearTimeout(timer);
                timer = setTimeout(function () {
                    handle.apply(_this, _arg);
                }, delay);
            }
        }

    </script>

二、节流 
函数节流就是预定一个函数只有在大于等于执行周期的时候才去执行，周期内调用不执行。就好像水滴攒到一定程度才会落下。主要应用于：抢购疯狂点击、页面滚动等   

<div>0</div>
    <button id="btn">click</button>
    <script>
        var btn = document.getElementById('btn'),
            div = document.getElementsByTagName('div')[0];
        btn.onclick = throttle(handle, 1000);

        function handle() {
            div.innerHTML = parseInt(div.innerHTML) + 1;
        }

        /*
            节流函数
            handle:调用的函数
            wait:等待时间（毫秒）
        */
        function throttle(handle, wait) {
            var lastTime = 0;
            return function () {
                //new Date().getTime()从1970到当前所过去的时间（毫秒）
                var nowTime = new Date().getTime();
                //时间差大于等于等待时间，就去执行函数
                if (nowTime - lastTime >= wait) {
                    handle.apply(this, arguments);
                    lastTime = nowTime;
                }
            }
        }
    </script>