节流防抖 · 前端

# 节流防抖做什么的： ```html <style> div { height: 100%; width: 100%; } </style> </head> <body> <div></div> </body> <script> let body = document.getElementsByTagName('div')[0]; var count = 0 function getUserAction() { body.innerText = count++; }; body.onmousemove = getUserAction; </script> ``` 可以试验一下，我们的鼠标在页面上移动时，会不断的触发conut++，如果这个函数不仅仅是count++呢，如果是处理ajax请求之类的，那对性能会有很大消耗。 ## 防抖在事件触发n秒后才执行。在n秒内再次触发，就以新的时间为准，在此之后的n秒后才执行。总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行。上面的代码可以改成这样： ~~~ let body = document.getElementsByTagName('div')[0]; var count = 0 function debounce(fn, interval = 500) { let timeout = null; return function () { clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, arguments); }, interval); }; } function getUserAction() { body.innerText = count++; }; body.onmousemove = debounce(getUserAction, 1000); ~~~ ## 节流函数节流是指定时间间隔内只会执行一次任务。 ~~~ function throttle(fn, interval = 300) { let canRun = true; return function () { if (!canRun) return; canRun = false; setTimeout(() => { fn.apply(this, arguments); canRun = true; }, interval); }; } ~~~