以下代码，只是最基本的功能，仅供参考
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>节流</title> </head> <body> <button id="btn">两秒内只能执行一次</button> <br> <button id="getCode">获取验证码</button> <script type="text/javascript"> window.onload = function () { /**********************************节流*******************************/ let btnBounce = document.getElementById("btn"); let status = true; btnBounce.addEventListener("click", function() { deBounce(test, 2000, status) }) function test() { console.log(123) } function deBounce(fn, time, bool) { // console.log(bool) if (!bool) { return } fn(); status = false; setTimeout(function() { status = true; }, time) } /******************************获取验证码*****************************/ let getCode = document.getElementById("getCode"); let time = 5; let timer = null; getCode.addEventListener("click", function() { getCodeFun(); }); function getCodeFun() { // if (timer) { // clearInterval(timer); // } getCode.setAttribute("disabled", true); timer = setInterval(function() { time --; getCode.innerHTML = "剩余 " + time + " s"; // console.log(time); if (time <= 0) { clearInterval(timer); time = 5; getCode.innerHTML = "重新获取"; getCode.removeAttribute("disabled"); } }, 1000) } } </script> </body> </html>
