先简明扼要概括一下：
-- 区别：
函数防抖是单位时间内只执行一次；
函数节流是间隔时间执行，不管事件触发有多么的频繁，都会保证在规定时间内执行一次真正的事件处理函数。
-- 原理：
防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。
节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
防抖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body>
<input type="text" id="inp">
</body>
</html>
<script>
let oInp=document.getElementById(‘inp‘);
function nice(fn,time){
let timer =null;
return arg=>{
clearTimeout(timer);
timer=setTimeout(()=>{
fn.call(this,arg)
},time)
}
}
let getFn = nice(ajax,1000);
function ajax(data){
console.log(data,"我拿到数据了");
}
// 键盘事件
oInp.addEventListener(‘keyup‘,(e)=>{
getFn(e.target.value)
});
// 滚动条滚动事件
document.body.onscroll=function(e){
getFn(e.timeStamp)
}
</script>
节流：（包含了防抖）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body>
<input type="text" id="inp">
</body>
</html>
<script>
let oInp=document.getElementById(‘inp‘);
function nice(fn,time){
let last,
timer =null;
return arg=>{
// 每次操作事件（滚动/输入）触发时，都会得到一个最新的时间毫秒数
let now = Date.now();
//如果上一次存在(有操作)并且上一次的时间+定时器间隔时间 > 现在的时间,说明现在这个操作是在我定时器触发的时间内的，
if(last && last + time > now){
// 那么下一次再进来，就要清除之前的定时器，重新计时。这是做了防抖
// 那就把之前的定时器清除重新计时，1S后执行函数。
clearTimeout(timer);
timer=setTimeout(()=>{
last=now; // 每次重新更新上一次的时间，这样在定时器间隔时间内，last+time 就会永远> now,造成if条件恒成立，也就会1秒执行一次事件函数
fn.call(this,arg)
},time)
}else{ //初始状态或操作间隔>定时器时间（1s），就会立即执行（ajax函数）
last = now; // 每次重新更新上一次的时间
fn.call(this,arg)
}
}
}
let getFn = nice(ajax,1000);
function ajax(data){
console.log(data,"我拿到数据了");
}
// 键盘事件
oInp.addEventListener(‘keydown‘,(e)=>{
getFn(e.target.value)
});
// 滚动条滚动事件
document.body.onscroll=function(e){
getFn(e.timeStamp)
}
</script>
以上代码可以运行一下去感受一下。
参考：
https://zhuanlan.zhihu.com/p/51608574
原文：https://www.cnblogs.com/haoqiyouyu/p/14551182.html