函数防跳动和函数节流的区别

debounce（防抖）：当一个动作被调用n毫秒后，该动作就会被执行。如果在n毫秒内再次调用该动作，将重新计算执行时间。例如：如果你一直用手指按住弹簧，直到你松开它才会弹起来。Throttle（节流阀）：预设一个执行周期，当调用动作的时间大于或等于执行周期时，执行动作，然后进入下一个新的循环。例如：拧紧水龙头，直到水呈水滴状流出，这时你会发现每隔一段时间就会流出一滴水。适用场景window对象的resize和scroll事件，拖动时的mousemove事件，射击游戏中的mousedown和keydown事件，文本输入，自动完成的keyup事件。其实对于window的resize事件，实际需求大多是n毫秒后停止改变大小。后期处理（防抖）；大多数其他事件需要以特定频率进行后处理（节流）。增加一个辅助函数restArgs/***类ES6rest参数的实现，让一个函数有支持rest参数的能力*@paramfunc需要rest参数的函数*@paramstartIndex从哪里开始识别rest参数，如果不传，默认最后一个参数是rest参数*@returns{Function}返回一个带rest参数的函数*/varrestArgs=function(func,startIndex){//rest参数从哪里开始，如果没有则默认是函数的最后一个参数对于剩余参数//注意函数对象的length属性揭示了函数的参数个数/*ex:functionadd(a,b){returna+b;}console.log(add.length;)//2*/rstartIndex=startIndex==null?func.length-1:+startIndex;//返回一个支持剩余参数的函数returnfunction(){//修正参数以避免负值varlength=Math.max(arguments.length-startIndex,0);//为剩余参数创建一个数组来存放varrest=Array(length);//假设参数以2开头：func(a,b,*rest)//调用：func(1,2,3,4,5);实际调用是：func.call(this,1,2,[3,4,5]);for(varindex=0;indexwait){//清除之前的“最新调用”if(timeout){clearTimeout(timeout);超时=空；}//刷新最后一次func调用的时间点previous=now;//执行函数调用result=func.apply(context,args);//如果超时被清除，if(!timeout)context=args=null;}elseif(!timeout&&options.trailing!==false){//如果设置了后沿，则暂停执行此调用attempttimeout=setTimeout(later,remaining);}返回结果；};//可以取消函数的节流throttled.cancel=function(){clearTimeout(timeout);前一个=0；超时=上下文=参数=空；};返回沉着；};点击查看demo参考文章http://www.tuicool.com/articl...http://blog.csdn.net/jinboker...http://www.css88.com/doc/unde...