如何在Jquery中切换设置间隔函数？
[英]How to toggle a set interval function in Jquery?
问题描述
我试图做一个倒数计时器。 当我按数字31（运行代码）时，我希望倒数在开始和暂停之间切换。 我该怎么办？h1元素上的另一个click事件将不起作用。 这是代码：
$(document).ready(function() { $('#clock').click(start) }); var seconds = 60; let interval; let minutes, id; function start(e) { id = e.target.id; minutes = Number(e.target.textContent) - 1; interval = setInterval(startTimer, 1000) console.log(id) } function startTimer() { seconds--; $(`#${id}`).text(minutes + ' : ' + seconds); if (seconds == 0) { seconds = 60; minutes--; if (minutes < 0) { clearInterval(interval); alert('time is up'); } } }
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Lab</title> </head> <body> <div class="container"> <h1 id="clock">31</h1> </div> </body> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <script src="app.js"></script> </html>
3 个解决方案
解决方案1
2 已采纳 2018-05-08 17:45:52
$(document).ready(function() { $('#clock').click(start) }); var seconds = 60; let interval = null; let minutes, id; function start(e) { id = e.target.id; if (!minutes) { minutes = Number(e.target.textContent) - 1; } if (interval == null) { interval = setInterval(startTimer, 1000) } else { clearInterval(interval); interval = null; } } function startTimer() { seconds--; $(`#${id}`).text(minutes + ' : ' + seconds); if (seconds == 0) { seconds = 60; minutes--; if (minutes < 0) { clearInterval(interval); alert('time is up'); } } }
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Lab</title> </head> <body> <div class="container"> <h1 id="clock">31</h1> </div> </body> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <script src="app.js"></script> </html>
解决方案2
1 2018-05-08 17:56:57
您可以维护标志isPaused并在setInterval检查其值，并在每次单击时切换其值。
$(document).ready(function() { let isPaused = true; let time = 0; let countdownTime = 31 * 60 * 1000; let timer = setInterval(() => { if (!isPaused) { countdownTime -= 1000; let min = Math.floor(countdownTime / (60 * 1000)); let sec = Math.floor((countdownTime - (min * 60 * 1000)) / 1000); if (countdownTime <= 0) alert("31 min!"); else $('#clock').html(`${min}:${sec}`); } }, 1000); $('#clock').click(function(e) { isPaused = !isPaused; }); });
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Lab</title> </head> <body> <div class="container"> <h1 id="clock">31</h1> </div> </body> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <script src="app.js"></script> </html>
解决方案3
1 2018-05-08 18:09:55
$(document).ready(function() { var seconds = 60; var interval; var minutes, id; function countdown(){ interval = setInterval(function(){ seconds--; if (seconds == 0) { seconds = 60; minutes--; if (minutes < 0) { clearInterval(interval); alert('time is up'); $('#clock').text('00:00'); } } var sec_out='0'+seconds; sec_out=sec_out.substr(sec_out.length-2); //for 05 or 03 sec... var min_out='0'+minutes; min_out=min_out.substr(min_out.length-2); //for 05 or 03 min... $('#clock').text(min_out + ':' + sec_out); }, 10); //10 for example change to 1000 } $('#clock').click(function(){ if(!interval){ // for start timer var this_val=$(this).text(); var this_val_first=this_val.split(':')[0]; this_val_first=parseInt(this_val_first,10); minutes=this_val_first; countdown(); }else{ // for stop timer clearInterval(interval); interval = null; } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <h1 id="clock" style="cursor:pointer;">31</h1> </div>
如果在 function 中设置了间隔，如何清除功能组件中的间隔？
[英]How to clear interval in functional component if interval is set in a function?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.