应用场景：
防抖：
1、seach搜索联想，用户在不断输入输入值时，用防抖来节约请求资源。
2、windows触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发这一次。
3、防止重复提交。
节流：
1、鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>防抖与节流</title> <style> .container{width: 400px;height: 200px;background: #ccc;text-align: center;font-size: 25px;line-height: 200px;} </style> </head> <body> <div class="container"></div> </body> <script> var count=1; var container=document.querySelector(".container"); function getUser() { this.innerHTML= count++; } // container.onmousemove=demo(getUser,1000,true);//防抖 container.onmousemove = time(getUser, 1000);//节流 // ***************************************************************** //防抖 function demo(fn,wait,buber) { var timer; return function () { clearTimeout(timer); if(buber){ var callNow=!timer; timer=window.setTimeout(function () { timer=null },wait); if(callNow){ fn.apply(this); } } else{ clearTimeout(timer); timer = window.setTimeout(fn.bind(this), wait); } } } // 节流 function time(fn,wait){ var pp=0;//参照物 return function () { var now= + new Date();//1970 1 1 到现在的毫秒数 if(now-pp>wait){ fn.apply(this); pp=now } } } </script> </html>
