javaScript节流与防抖

一、节流（throttle）

用来实现阻止在短时间内重复多次触发同一个函数。主要用途：防止使用脚本循环触发网络请求的函数的恶意行为，确保请求的真实性（当然也包括其他阻止高频触发行为的应用）；

实现原理图：

 代码实现：

//节流函数
function throttle(handler,wait){
    var lastDate = 0;
    return function(){
        var newDate = new Date().getTime();
        if(newDate - lastDate > wait){
            handler.apply(this,arguments);
        }
        lastDate = newDate;
    }
}

节流函数测试：

function foo(nub){
    console.log(nub);
}
var han = throttle(foo,1000); //设置节流时间为1000毫秒
for(var i = 0; i < 100; i++){
    han("1");//使用for调用执行节流函数han只能第一次被触发，因为程序的执行速度是微秒级的速度
}

二、防抖

用来实现高频触发函数调用时，实际只调用最后一次函数执行。主要用途：用于可能出现高频触发DOM结构或样式修改，导致的页面高频重排重绘，严重影响页面性能，同时也导致操作的DOM闪烁抖动的情况，造成体验效果差。（也包括其他阻止高频触发的用途）

代码实现：

//防抖函数
function antishake(handler,interval){
    var lastDate = 0;
    var time ;
    return function(){
        var self = this;
        var args = arguments;
        clearTimeout(time);
        time = setTimeout(function(){
            handler.apply(self,args);
        },interval);
    }
}

防抖函数测试：

<div id="nub">0</div>
<button id="but">点我</button>
<script>
    var odiv = document.getElementById("nub");
    var oBut = document.getElementById("but");
        oBut.onclick = antishake(fun,1000);//一秒以内的连续点击只会触发一次
    var num = 0;
    function fun(){
        odiv.innerText =  ++num;
    }        
</script>