正常，节流，防抖区别演示
节流：
特点：如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数，不管在这个中间有多少次触发这个事件，执行函数的频次总是固定的；
应用场景：
- 游戏中的一些设计--王者荣耀 英雄的普攻；
- 监听页面的滚动事件；
- 鼠标移动事件；
- 用户频繁点击按钮操作；
实现方式：
//第三方库实现 <input type="text"> <!--html标签--> <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script> <script> const inputEl = document.querySelector("input") let counter = 0 const inputChange = function(event) { console.log(`发送了第${++counter}次网络请求`, this, event) } // 节流处理 inputEl.oninput =_.throttle(inputChange, 2000)//当用户不断触发事件按照2秒的频率执行 </script>
//手动实现 //js 封装throttle方法 function throttle(fn, interval, options) { // 1.记录上一次的开始时间 let lastTime = 0 // 2.事件触发时, 真正执行的函数 const _throttle = function(e) { // 2.1.获取当前事件触发时的时间 const nowTime = new Date().getTime() // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数 const remainTime = interval - (nowTime - lastTime) if (remainTime <= 0) { // 2.3.真正触发函数 fn.apply(this,[e]) // 2.4.保留上次触发的时间 lastTime = nowTime } } return _throttle } //使用位置 <body> <input type="text"> </body> <script src="./jieliu.js"></script> <script> const inputEl = document.querySelector('input') let counter = 0 const inputChange = function (e) { console.log(`发送了${++counter}次网络请求`, this, e); } inputEl.oninput = throttle(inputChange, 2000) </script>
防抖：
特点：当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间(非常短的时间)，当事件密集触发时，函数的触发会被频繁的推迟，只有等待了一段时间也没有事件触发，才会真正的执行响应函数
应用场景：
- 输入框中频繁的输入内容，搜索或者提交信息；
- 频繁的点击按钮，触发某个事件；
- 监听浏览器滚动事件，完成某些特定操作；
- 用户缩放浏览器的resize事件；
实现方式：
//第三方库实现 <input type="text"> <!--html标签--> <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script> <script> const inputEl = document.querySelector("input") let counter = 0 const inputChange = function(event) { console.log(`发送了第${++counter}次网络请求`, this, event) } // 防抖处理 inputEl.oninput = _.debounce(inputChange, 2000)//当用户停止输入的时候延时2秒后执行 </script>
//手动实现 //js 封装debounce方法 function debounce(fn,timeout) { var timer return function(e) { if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ fn.apply(this,[e]) },timeout) } } //使用位置 <body> <input type="text"> </body> <script src="./fangdou.js"></script> <script> const inputEl = document.querySelector('input') let counter = 0 const inputChange = function(e) { console.log(`发送了${++counter}次网络请求`,this,e); } inputEl.oninput = debounce(inputChange,1000) </script>
