防抖&节流

### 定义 #### 防抖： >防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行。 #### 节流： >节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次触发。 ### 使用场景 - 搜索框 - 按钮 - 监听滚动 - 频繁使用鼠标 - ... 总的来说：任何东西被频繁的调用都有可能需要防抖或者节流去优化 ### 实现方式 #### 防抖 ```javascript function showLog() { console.log('show'); } /* * 防抖思路： * 先开启一个定时任务执行，定时任务完成后则清空；当再调用时，如果定时任务仍存在则清空原来任务，创建新的定时任务 * */ function debounce(fn, space) { let task = null; return function (){ if(task) { clearTimeout(task); } task = setTimeout(fn.apply(this, arguments), space); } } // 使用 let debounceShowLog = debounce(showLog, 3000); debounceShowLog() ``` #### 节流 ```javascript /* * 节流思路： * 先开启一个定时任务执行，定时任务完成后则清空，当再调用时，如果定时任务仍存在则不执行任何操作 * */ function throttle(fn, space) { let task = null; return function () { if(!task) { task = setTimeout(function () { task = null; fn.apply(this, arguments); }, space); } } } let throttleShowLog = throttle(showLog, 3000); ``` 简单才是真爱