·方法一
1.这种实现方式的思路很好理解：设置一个一间隔时间，比如50毫秒，以此时间为基准设置定时器，当第一次触发事件到第二次触发事件间隔小于50毫秒时，清除这个定时器，并设置一个新的定时器，以此类推，直到有一次事件触发后50毫秒内没有重复触发。代码如下：
function debounce(method){
clearTimeout(method.timer);
method.timer=setTimeout(function(){
method();
},50);
}
这种设计方式有一个问题：本来应该多次触发的事件，可能最终只会发生一次。具体来说，一个循序渐进的滚动事件，如果用户滚动太快速，或者程序设置的函数节流间隔时间太长，那么最终滚动事件会呈现为一个很突然的跳跃事件，中间过程都被节流截掉了。这个例子举的有点夸张了，不过使用这种方式进行节流最终是会明显感受到程序比不节流的时候“更突兀”，这对于用户体验是很差的。有一种弥补这种缺陷的设计思路。
·方法二
2.第二种实现方式的思路与第一种稍有差别：设置一个间隔时间，比如50毫秒，以此时间为基准稳定分隔事件触发情况，也就是说100毫秒内连续触发多次事件，也只会按照50毫秒一次稳定分隔执行。代码如下：
var oldTime=new Date().getTime();
var delay=50;
function throttle1(method){
var curTime=new Date().getTime();
if(curTime-oldTime>=delay){
oldTime=curTime;
method();
}
}
相比于第一种方法，第二种方法也许会比第一种方法执行更多次（有时候意味着更多次请求后台，即更多的流量），但是却很好的解决了第一种方法清除中间过程的缺陷。因此在具体场景应根据情况择优决定使用哪种方法。
对于方法二，我们再提供另一种同样功能的写法：
var timer=undefined,delay=50;
function throttle2(method){
if(timer){
return ;
}
method();
timer=setTimeout(function(){
timer=undefined;
},delay);
}
最后说点个外话，说明一下函数节流的名称问题，大家往往会看到throttle和debounce两个方法名，throttle可以译为“节制，卡住”，debounce可以译为“防反跳”。在《JavaScript高级程序设计》中作者介绍了方法一，并且作者使用了“throttle”这个函数名。而在《第三方JavaScript编程》书中同时出现了方法一和方法二，作者将方法一命名为“debounce”，将方法二命名为“throttle”。国内在同时介绍两个方法的时候有些文章错误的将方法一命名为“throttle”，而将方法二命名为“debounce”，从英语的角度来说是很不负责任的。因此在这里拨乱反正：方法一适合理解为“防反跳”，应命名为“debounce”；方法二适合理解为“函数节制”，应命名为“throttle”。
下面是自己测试的小案例
<body>
<p><input type="text" id="ipt"/></p>
<script>
//简单的案例1(防弹跳)
var time = undefined;
function debounce(fn,delay){
if(time){
return
}
fn();
time = setTimeout(function(){
time = undefined;
},delay)
}
//简单地案例2(函数触发的节流)
function throttle(fn,delay){
if(fn.t){
clearTimeout(fn.t)
}
fn.t = setTimeout(function(){
fn()
},delay)
}
//输入框的键盘事件
ipt.onkeyup = function(){
throttle(a,800)
}
function a(){
console.log(1)
}
</script>
</body>
可以借助lodash.js来完成debounce
首先引入
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
小案例
<body>
<p><input type="text" id="ipt"/></p>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var fun = _.debounce(function(){
console.log(1)
}, 800)
ipt.onkeyup = function(){
fun();
}
</script>
</body>
网友评论