为什么setinterval和settimeout越点击越快以及响应的解决办法
- 2019 年 10 月 7 日
- 筆記
setinterval大家都很了解，但是如果时间长的话，误差也会越来越大，所以我习惯上使用settimeout的递归，闲来没事，写了一个定时器的递归
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> </head> <body> <div> </div> <button>点击</button> </body> <script> $(function () { var num = 0; var end = ""; $("button").on("click", function () { function result() { end = setTimeout(function() { num++; $("div").text(num); result() }, 1000); } result(); }) }) </script> </html>
嗯，，看似很完美，有一个很明显的bug，那就是在页面上，越点击，，它跑的越快，并没有依照1000毫秒的时间进行间隔执行，这是因为，，每点击一次，，settimeout就注册一次，所以会越来越快，，解决的思路就是每次点击的时候进行定时器的清除，，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> </head> <body> <div> </div> <button>点击</button> </body> <script> $(function () { var num = 0; var end = ""; $("button").on("click", function () { clearTimeout(end); function result() { end = setTimeout(function() { num++; $("div").text(num); result() }, 1000); } result(); }) }) </script> </html>
