JS如何停止功能——从点击按钮到自动（定时器）
[英]JS how stop function - from clicking button to automatically (timer)
问题描述
The following function changes background-color with random colors clicking on a start button.
以下函数通过单击开始按钮以随机颜色更改背景颜色。 The event ends clicking on a stop button, but actually I would rather prefer to stop it automatically after few seconds.事件结束单击停止按钮，但实际上我宁愿在几秒钟后自动停止它。
I tried with a setTimeout() but due to my JS low level knowledge I'm far from the solution.我尝试了 setTimeout() 但由于我的 JS 低级知识，我离解决方案还很远。
Thanks to anyone will be so kind to help me.感谢任何人会那么好心地帮助我。
function setColor(randomColor){ var body = document.body; body.style.backgroundColor=randomColor; var span = document.querySelector(".color"); span.innerText = "\t"+randomColor; } function changeColor(){ var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16); setColor(randomColor); } const stopDisco = () => { var btn = document.querySelector("button"); // btn.setAttribute("class", "on"); setColor("#ffffff"); } function startDisco(){ var btn = document.querySelector("button"); // var btnClass = btn.getAttribute("class"); changeColor(); let interval = setInterval(changeColor, 50); var stopBtn = document.querySelector(".stop") stopBtn.addEventListener('click', function () { clearInterval(interval); stopDisco(); }) }
<body> <div> <button class="on" onclick="startDisco()">Start Disco</button> <button class="stop">Stop Disco</button> <p>Hex Color:<span class ="color">#FFFFFF</span></p> </div> </body>
2 个解决方案
解决方案1
1 已采纳 2022-05-10 18:01:05
Here is an improved version这是一个改进的版本
I use setTimeout to stop after x seconds我使用 setTimeout 在 x 秒后停止
Also I define the various buttons and other elements once我还定义了各种按钮和其他元素一次
const start = document.getElementById("start"); const stop = document.getElementById("stop"); const body = document.body; const span = document.querySelector(".color"); let interval; function setColor(randomColor) { body.style.backgroundColor = randomColor; span.innerText = randomColor; // a tab is not useful here } function changeColor() { var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); setColor(randomColor); } const stopDisco = () => { setColor("#ffffff"); clearInterval(interval); } stop.addEventListener('click',stopDisco) start.addEventListener('click', function() { clearInterval(interval); interval = setInterval(changeColor,50) setTimeout(stopDisco,5000) })
<body> <div> <button class="on" id="start">Start Disco</button> <button class="stop" id="stop">Stop Disco</button> <p>Hex Color:<span class="color">#FFFFFF</span></p> </div> </body>
解决方案2
1 2022-05-10 18:03:34
Instead of adding an eventListener to the Stop button, you could simply pass the clearInterval() and stopDisco() methods to a setTimeout() , like so:您可以简单地将clearInterval()和stopDisco()方法传递给setTimeout() ，而不是将 eventListener 添加到停止按钮，如下所示：
function setColor(randomColor){ var body = document.body; body.style.backgroundColor=randomColor; var span = document.querySelector(".color"); span.innerText = "\t"+randomColor; } function changeColor(){ var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16); setColor(randomColor); } const stopDisco = () => { var btn = document.querySelector("button"); // btn.setAttribute("class", "on"); setColor("#ffffff"); } function startDisco(){ var btn = document.querySelector("button"); // var btnClass = btn.getAttribute("class"); changeColor(); let interval = setInterval(changeColor, 50); /* var stopBtn = document.querySelector(".stop") stopBtn.addEventListener('click', function () { clearInterval(interval); stopDisco(); }) */ setTimeout(() => { clearInterval(interval); stopDisco(); }, 3000); // Stop Disco after 3 seconds, but you could manipulate this value as per your need }
<body> <div> <button class="on" onclick="startDisco()">Start Disco</button> <button class="stop">Stop Disco</button> <p>Hex Color:<span class ="color">#FFFFFF</span></p> </div> </body>
For reference, read through the following MDN doc:作为参考，请通读以下 MDN 文档：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.