节流：
高频事件不断触发，每隔一定时间会执行一次，会稀释高频事件；
实现原理：在闭包内设置一个标记，初始值为true，若标记为false，则退出函数，不执行，若标记值为true，马上将标记变成false；并且执行一个定时器，在定时器内执行回调函数，并且将标记设置为true；
具体代码：
function throttle(fn,time){ var canrun = true;//通过闭包保存一个标记 return function(){//返回一个函数 if(!canrun) return;//如果不在执行时间内 则不执行 canrun = false;//如果在执行时间内 马上将标记改为false 然后执行后续代码 setTimeout(() => { // 执行时间结束时 执行函数 并且将标记设置为可执行 fn.apply(this,arguments); canrun = true; },time); }; }
测试代码：
let dom = document.getElementsByClassName("content")[0];
var log2 = throttle(log,2000);//把log函数变成一个节流函数
dom.addEventListener("click",function(){
log2(222);
})
function log(num){
console.log(num);
}
防抖：
高频事件触发时，在一定时间内函数只会触发一次，如果不停触发，那么久只执行一次，不会隔一段时间执行一次，除非中间停止足够的时间，才会触发第二次；
实现原理：在闭包内定义一个变量，次变量用来存放定时器，执行函数时会先清除上一个定时器，然后重新设置一个定时器，定时器内执行回调函数，如果一直触发，就会不断的清除计时器，函数就不会执行；
具体代码：
function debounce(fn,time){ let timeout = null; return function(){ clearTimeout(timeout); //清除定时器 定时器清除后，内部的函数就不会执行 timeout = setTimeout(() => {//重新设置定时器 fn.apply(this,arguments);//执行函数 }, time); } }
测试代码：
let dom = document.getElementsByClassName("content")[0];
var log2 = debounce(log,2000);//把log函数变成防抖函数
dom.addEventListener("click",function(){
log2(222);
})
function log(num){
console.log(num);
}
总结一下，节流函数和防抖函数在高频事件不断触发时会有明显区别；节流函数会稀释高频事件，而防抖会阻断，事件不停，函数就不会执行