防抖（debounce）用户与网页进行交互时，经常出现根据页面的状态、数据向服务器请求、发送数据的场景，比如：根据用户的输入数据进行实时校验，下拉请求数据等等，如果用户操作过于频繁，页面状态、数据变化的太快太频繁，会进行多次请求，这其中的很多请求都是没有意义的，实时校验，只需要校验用户最后的输入，下拉请求只需要在用户下拉的最后一次进行请求。这就需要防抖来实现了。防抖的原理：为事件触发时调用的函数添加延迟，如果在延迟内频繁触发，上一次的事件触发会被取消，延迟将会重新计算，这样一来用户的最会一次触发，函数才会真正被调用。//fn为回调函数，delay是人为设置的延迟function debounce(fn, delay){ var timeout; //定时器编号 return function(){ //context是回调函数运行的环境， //args是回调函数的参数，一般是addEventListener传进来的event变量 var context = this, args = arguments; clearTimeout(timeout);//当用户频繁触发事件时，定时器被清除 timeout = setTimeout(function(){ fn.apply(context, args); }, delay); }}//调用方式var validate = debounce(function(){ //do somthing}, 200);document.querySelector(‘input’).addEventListener(‘input’, validate);节流（throttle）节流，顾名思义就是把管道的阀门稍稍关紧一点，让水流动的少一点。在javascript中，很多事件是连续触发的，比如：resize，mousemove。我们不希望事件频繁触发，如果采用防抖方案，事件只在延迟时间内触发最后一次，这显然是不合理的，我们只需要让其触发的频率低一些，这就需要节流来实现。节流原理：为事件触发时调用的函数添加时间阈值，只有在超过时间阈值时触发事件，回调函数才会被调用。//fn为回调函数，threshhold是时间阈值function throttle(fn, threshhold){ var start = new Date(), timeout; var threshhold = threshhold || 160; return function(){ //context是回调函数运行的环境， //args是回调函数的参数，一般是addEventListener传进来的event变量 var context = this, args = arguments, cur = new Date(); clearTimeout(timeout); //通过连续两次触发的时间间隔，决定是否调用回调函数 if(cur - start >= threshhold){ fn.apply(context, args); start = cur; }else{ //当连续触发行为结束时，还要进行最后一次函数回调 timeout = setTimeout(function(){ fn.apply(context, args) }, threshhold); } }}//调用函数var mousemove = throttle(function(e) { //do somthing});// 绑定监听document.querySelector("#panel").addEventListener(‘mousemove’, mousemove);以下是html页面 <div id=‘panel’ style=“background:blue;width:100vw;height:100vh”> </div>最后，大家可以通过这个动画来理解，学习防抖和节流。