共计 1729 个字符，预计需要花费 5 分钟才能阅读完成。
防抖 （Debounce）是指在肯定工夫内，当函数被频繁触发时，只有在最初一次触发后的延迟时间内，函数才会被真正执行。如果在延迟时间内又有触发事件产生，会从新开始计时。
简洁的讲就是：n 秒后执行该事件，在 n 秒内被反复触发，则从新计时。
代码实现：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title></title> | |
| <style> | |
| #btn { | |
| width: 100px; | |
| height: 40px; | |
| margin: 40px; | |
| background-color: aqua; | |
| cursor: pointer; | |
| border: solid 2px #000; | |
| border-radius: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <button type="button" id="btn"> 点击我 </button> | |
| </div> | |
| <script type="text/javascript"> | |
| // 获取 按钮 | |
| let btn = document.querySelector('#btn'); | |
| //“点击我”的办法 | |
| function palyClick() {// console.log(this); | |
| console.log('哈哈哈，我被你点击了'); | |
| } | |
| // 封装防抖函数 | |
| // func: 点击按钮要执行的函数 | |
| // delay: 延迟时间 | |
| function debounce(func, delay) { | |
| // 设置定时器标识 | |
| let timer = null; | |
| // 留神这里不能应用箭头函数 否则会扭转 this 的指向 | |
| return function () { | |
| let _this = this; | |
| // 革除 timer 延时办法 | |
| if (timer !== null) { | |
| // 革除定时器 | |
| clearTimeout(timer); | |
| } | |
| // 设置定时器 | |
| timer = setTimeout(() => {func.apply(_this); | |
| timer = null; | |
| }, delay) | |
| } | |
| } | |
| // 给按钮增加 d 点击事件监听 点击时，执行 debounce 函数，延时工夫为 1000 | |
| btn.addEventListener('click', debounce(palyClick, 2000)); | |
| </script> | |
| </body> | |
| </html> |
成果视频：
节流 （Throttle）是指在肯定工夫内，无论函数被触发多少次，函数只会在固定的工夫距离内执行一次。如果在工夫距离内有屡次触发事件，只会执行最初一次。
简洁的讲就是：n 秒内只运行一次，在 n 秒内反复被触发，只有最初一次是失效。
代码实现：
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| #btn { | |
| width: 100px; | |
| height: 40px; | |
| margin: 40px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="btn"> 触发按钮 </button> | |
| <script> | |
| // 获取 按钮 | |
| const btn = document.getElementById("btn"); | |
| //“触发按钮”的办法 | |
| function playClick() {console.log("节流办法曾经触发"); | |
| } | |
| // 封装节流函数 | |
| function Throttle(Fun, time) { | |
| let flag = false | |
| return function () { | |
| // 首次执行办法，flag 置为 true | |
| if (!flag) {Fun(); | |
| flag = true; | |
| } | |
| // 当定时器中回调函数执行完，将 flag 置为 false 时，才会从新执行办法语句 | |
| setTimeout(() => {flag = false;}, time) | |
| } | |
| }; | |
| btn.onclick = Throttle(playClick, 3000); | |
| </script> | |
| </body> | |
| </html> |
成果视频：
正文完
发表至： javascript
2024-02-28
