内容目录
区别：
函数节流是指一定时间内 js 方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。
函数防抖是指频繁触发的情况下，只有足够的空间时间，才执行代码一次。比如坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。
一、节流： 控制高频事件执行次数
应用场景： 多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件
<style> body { height: 2000px; } </style> <script> window.onscroll = throttle(function () { console.log("节流"); }, 500) function throttle(fn, delay) { let flag = true; return function () { if (flag) { setTimeout(() => { fn.call(this); flag = true; }, delay); } flag = false; } } </script>
二、防抖：用户触发事件过于频繁，只要最后一次事件的操作
应用场景：最常见的就是用户注册时候手机号码验证等，只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹框提示。
<body> <input type="text"> </body> <script> let inp = document.querySelector('input'); inp.oninput = debounce(function () { console.log(this.value); }, 500) function debounce(fn, delay) { let t = null; return function () { if (t !== null) { clearTimeout(t); } t = setTimeout(() => { fn.call(this); }, delay) } } </script>
