JS how stop function - from clicking button to automatically (timer)-CodePudding

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.

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   onclick="startDisco()">Start Disco</button>
    <button >Stop Disco</button>
  <p>Hex Color:<span class ="color">#FFFFFF</span></p>
  </div>
</body>

CodePudding user response：

Here is an improved version

I use setTimeout to stop after x seconds

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  id="start">Start Disco</button>
    <button  id="stop">Stop Disco</button>
    <p>Hex Color:<span >#FFFFFF</span></p>
  </div>
</body>

CodePudding user response：

Instead of adding an eventListener to the Stop button, you could simply pass the clearInterval() and stopDisco() methods to a setTimeout(), like so:

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   onclick="startDisco()">Start Disco</button>
    <button >Stop Disco</button>
  <p>Hex Color:<span class ="color">#FFFFFF</span></p>
  </div>
</body>

For reference, read through the following MDN doc:

setTimeout