节流和防抖

　　在前端开发中会有用户行为会频繁的触发事件，比如疯狂的点击。对于dom操作，资源的加载等耗费性能的处理可能会导致界面的卡顿，甚至浏览器崩溃。函数节流防抖就是为了解决类似的问题产生的。

　　函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就像水滴到攒到一定重量才会滴落。

　　html部分有一个点击按钮，当点击的时候会显示点击的次数。

<div id="div">0</div>
<button id="btn">抢</button>

　　script部分在点击时候限制在1秒钟只能点击一次

　　　　　var div = document.getElementById("div");
　　　　　var btn = document.getElementById("btn");

　　　　function throttle(handle,wait){
            var lastTime = 0;
            return function(e){
                var nowTime = new Date().getTime();  //从1900开始到现在过了多少毫秒
                if(nowTime - lastTime > wait){
                    handle.apply(this,arguments)
                    lastTime = nowTime;
                }
            }
        }
        function buy(e){
            console.log(this,e)
            div.innerHTML = parseInt(div.innerHTML) + 1;
        }
        btn.onclick = throttle(buy,1000)

 

　　防抖：类似于上公交车，有人上的时候车不会走。当没有人上的时候，等一段时间再走。再互联网的应用比如说百度搜索，当输入字符的时候不会马上搜索，而是当停止输入过一段时间后自动搜索。

　　html 部分是一个输入框

<input type="text" id="inp">

　script部分是防抖代码，一秒钟以后才会搜索

        var inp = document.getElementById("inp");
        var timer = null;
        function ajax(){
            console.log(this.value);
        }
        inp.oninput = function(){
            var self = this;
            clearTimeout(timer);
            timer = setTimeout(function(){
                ajax.call(self)
            },1000)
        }