integrating SetTimeOut function after button click

Related searches

I have created a snippet of code that changes the state from display:block to display:none by using an onClick element. My goal is to delay the change in state, for a few seconds whilst an animation effect occurs.

This snippet of code below is what I am currently using to change the state of the element, but unsure on how to incorporate a delay.

Any advice or suggestions is greatly appreciated.

Thanks, Ant

function showDiv1(elem) {

  var divsToCheck = ["close","Holder"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
  if (divsToCheck[i] == elem) {
  document.getElementById(divsToCheck[i]).style.display = "block";
} else {
  document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}

Put the code you want to be delayed inside an anonymous function, like so:

function showDiv1(elem) {

  var divsToCheck = ["close","Holder"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
    if (divsToCheck[i] == elem) {
      setTimeout(function() {
         document.getElementById(divsToCheck[i]).style.display = "block";
      }, 500);
    } else {
      setTimeout(function() {
        document.getElementById(divsToCheck[i]).style.display = "none";
      }, 500);
    }
  }
}

Here, 500 means delaying by 500 ms. You can change this to whatever amount of time (in milliseconds) that you need.

javascript - setTimeout after button click, $(function(){ $('#btnreg').click(function(){ $(this).html('<i class="fas fa-cog fa-spin" ></i>'); }); setTimeout(function(){ $(this). setTimeout Example 1. The setTimeout() function takes two parameters: 1) the function or code to call and 2) the number of milliseconds to wait before executing the code/function. A basic example below pops up an alert box 2 seconds after the button is clicked: <input type="button" value="click me" onclick="setTimeout('window.alert('Hello!')', 2000)" />.

You should call a function in your loop that takes care of the setTimeout and hiding/showing instead of calling the timeout function in a loop. (Won't work because i is no longer available). See here: https://jsbin.com/refodobaca/1/edit?html,css,js,output

function showDiv1(elem) {
  var divsToCheck = ["close","Holder"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
    if (divsToCheck[i] == elem) {
      showHideDiv(divsToCheck[i], true);
    } else {
      showHideDiv(divsToCheck[i], false);
    }
  }
}

function showHideDiv(elem, bShow) {

  var timeoutSeconds = 3;
  setTimeout(function() {
    document.getElementById(elem).style.display = (bShow ? "block" : "none");
  }, timeoutSeconds * 1000);

}
showDiv1('Holder');

How to call function that will last 2 seconds?, integrating SetTimeOut function after button click. I have created a snippet of code that changes the state from display:block to display:none by using an onClick� setTimeout is a native JavaScript function (although it can be used with a library such as jQuery, as we’ll see later on), which calls a function or executes a code snippet after a specified

Your question is a little unclear because the name of your function is showDiv1 but you explain that you're trying to hide an element, so I've tried to answer in light of this and hopefully it will give you some ideas.

This code displays a couple of divs. If you click on them they turn red and, after a couple of seconds (to represent an animation), they are hidden.

dummyAnim returns a promise. After the animation has run its course (here represented by a two second delay) it is resolved. I've used await to pause code execution in an async function until the animation has resolved.

// Grab the elements and add click handlers to them
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', hideElement, false));

function dummyAnim() {

  // return a promise which resolves (an animation)
  // after two seconds
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), 2000);
  });
}

async function hideElement() {
  this.classList.add('red');
  await dummyAnim();
  this.classList.add('hidden');
}
div { color: black; display: block }
.hidden { display: none }
.red { color: red }
<div>close</div>
<div>holder</div>

setInterval() acts weird after switching tabs, integrating SetTimeOut function after button click. I have created a snippet of code that changes the state from display:block to display:none by using an onClick� Use setTimeout to call that function recursively, as discussed previously. Make a button inactive after 10 minutes by using setTimeout to call a function that disables the button after 10 minutes. This might be useful on a Web page that gives people a limited time to perform a specific task.

Using setTimeout() with Javascript, The Javascript setTimeout() function allows code to be executed a set time A basic example below pops up an alert box 2 seconds after the button is clicked:. setTimeout allows us to run a function once after the interval of time. setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval. These methods are not a part of JavaScript specification. But most environments have the internal scheduler and provide these methods.

settimeout typescript Code Example, setTimeout(alert, 1000); // Will alert once, after a second. 5. setInterval(function(){. 6 Click here to visit our frequently asked questions about HTML5 video. When a visitor clicks the button, the setTimeout () method is called, passing in the expression that we want to run after the time delay, and the value of the time delay itself – 5,000 milliseconds or 5 seconds.

var button = document.getElementById("button"); button.addEventListener("click", function(){ // instructions that should be executed on click // of the button goes here. so also for timers. Where a block of code can be queued up for execution after a certain time delay elapses.

Comments
  • have you tried setTimeout()
  • The syntax is setTimeout(function () { /* code here */ }, 5 * 1000); (that's a five second delay)