1.直接上码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>debounce-throttle</title>
<script type="text/javascript"> //节流函数：时间戳节流，规定时间内一定执行一次
function throttle(fn, delay){
var prev = Date.now();
return () => {
var context = this,args = arguments;
var now = Date.now();
if(now - prev >= delay){
fn.apply(context, args);
prev = Date.now();
}
};
}
//节流函数：定时器节流，规定时间内一定执行一次
function _throttle(fn, delay){
var timer;
return () => {
var context = this,args = arguments;
if(!timer){
timer = setTimeout(function(){
fn.apply(context, args);
timer=null;
},delay);
}
};
}
//事件触发时立即执行，触发完毕还能执行一次的节流函数：
function __throttle(fn, delay){
var timer,prev = Date.now();
return () => {
var context = this,args = arguments;
var now = Date.now();
clearTimeout(timer);
if(delay - (now - prev) <= 0){
fn.apply(context, args);
prev = Date.now();
}else{
timer = setTimeout(function(){
fn.apply(context, args);
},delay);
}
};
}
//防抖函数：规定一定时间后只执行一次fn
function debounce(fn, delay){
var timer;
return () => {
var context = this,args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
},delay);
};
}
//防抖函数：立即执行然后一定时间后只执行一次fn
function _debounce(fn, delay, flag){
var timer;
return () => {
var context = this,args = arguments;
clearTimeout(timer);
if(flag){
var now = !timer;
timer = setTimeout(function(){
timer = null;
},delay);
if(now){
fn.apply(context, args);
}
}else{
timer = setTimeout(function(){
fn.apply(context, args);
},delay);
}
};
}
function printLog(){
var date = new Date();
var second = date.getSeconds(),milliseconds=date.getMilliseconds();
console.log('printLog:'+second+' ' +milliseconds);
}
window.onload = function(){
document.getElementById('div').addEventListener('click', throttle(printLog,1000));
} </script>
</head>
<body>
<div id="div" style="width:200px;height:160px;background-color: yellow;"></div>
</body>
</html>
2.总结
防止一个事件频繁触发回调函数的方式：
防抖动：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
节流：使得一定时间内只触发一次函数。
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。
原理是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
3.参考资料
https://blog.csdn.net/crystal6918/article/details/62236730
http://www.ptbird.cn/javascript-anti-shake-throttle.html
