為什麼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>
