How to wait for the function to end before start the function again-CodePudding

How to wait for my first function to end before I can click "Click me" button again. I have been searching for a way to let my function end first before I can let the new function run again.

document.getElementById("myBtn").addEventListener("click", myFunction);

setTimeout(function() {
  myFunction();
}, 3000);

var id = null;

function myFunction() {
  var elem = document.getElementById("myAnimation");
  var pos = 0;
  clearInterval(id);
  id = setInterval(frame, 10);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos  ;
      elem.style.top = pos   'px';
      elem.style.left = pos   'px';
    }
  }
}

#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<h2>JavaScript addEventListener()</h2>

<button id="myBtn">Click Me</button>

<div id="myContainer">
  <div id="myAnimation"></div>

CodePudding user response：

If we disable and enable the button in the correct place, it will work quite nicely

I also cleaned up the code a bit to make it more contained.

window.addEventListener('DOMContentLoaded', () => {
  const myBtn = document.getElementById("myBtn");
  const elem = document.getElementById("myAnimation");
  let id = null;
  let pos = 0;
  const frame = () => {
    if (pos == 350) {
      clearInterval(id);
      myBtn.disabled = false;
    } else {
      pos  ;
      elem.style.top = pos   'px';
      elem.style.left = pos   'px';
    }
  }

  const myFunction = () => {
    pos = 0;
    clearInterval(id);
    id = setInterval(frame, 10);
    myBtn.disabled = true;
  }

  id = setTimeout(myFunction, 3000);
  myBtn.addEventListener("click", myFunction);
});

#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<h2>JavaScript addEventListener()</h2>

<button id="myBtn">Click Me</button>

<div id="myContainer">
  <div id="myAnimation"></div>
</div>

CodePudding user response：

As a first implementation you could disable the button before you start the animation, and you only enable it after you are done

var myBtn = document.getElementById("myBtn")
myBtn.addEventListener("click", myFunction);

setTimeout(function() {
  myFunction();
}, 3000);

var id = null;

function myFunction() {
  var elem = document.getElementById("myAnimation");
  var pos = 0;
  clearInterval(id);
  id = setInterval(frame, 10);

  // disable the button
  myBtn.disabled = true;

  function frame() {
    if (pos == 350) {
      clearInterval(id);
      // enable the button again
      myBtn.disabled = false;

    } else {
      pos  ;
      elem.style.top = pos   'px';
      elem.style.left = pos   'px';
    }
  }
}

#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<h2>JavaScript addEventListener()</h2>

<button id="myBtn">Click Me</button>

<div id="myContainer">
  <div id="myAnimation"></div>

CodePudding user response：

You should disable your button during your function.

edited: If you don't want to disable maybe with a lock.

document.getElementById("myBtn").addEventListener("click", myFunction);

setTimeout(function() {
  myFunction();
}, 3000);

var id = null;
var lock = false;

function myFunction() {
  
  if(!lock){
  lock = true;
  var elem = document.getElementById("myAnimation");
  var pos = 0;
  clearInterval(id);
  
  id = setInterval(frame, 10);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
      lock = false;
    } else {
      pos  ;
      elem.style.top = pos   'px';
      elem.style.left = pos   'px';
    }
  }
 }
}

#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<h2>JavaScript addEventListener()</h2>

<button id="myBtn">Click Me</button>

<div id="myContainer">
  <div id="myAnimation"></div>

edited: Try making your animation with CSS it's a better practice.

CodePudding user response：

let sum = 0;
const x = 10;
async function firstFunction() {
  for (i = 0; i < x; i  ) {
    sum = sum   i;
  }
  return sum;
}
async function secondFunction() {
  await firstFunction();
  console.log('After firstFunction executed sum is', sum);
}
secondFunction();