How to call function that will last 2 seconds?

Question

I need to call spinner on click and it need to show up 2 seconds and then disappear.I cant use setTimeout and setInterval...is there any other function for that?

Answer 1

Ok, here's a quick example using setTimeout.

HTML

<button>Click me</button><br>
<div id="spinner">I am a spinner</div>

CSS

#spinner {
    display: none;
}

JavaScript

// pick up the elements to be used
var button = document.querySelector('button');
var spinner = document.querySelector('#spinner');

// add an event to the button so that `showThing` is run
// when it is clicked
button.onclick = showThing;

// `showThing` simply displays the spinner and then
// calls `removeThing` after 2 seconds
function showThing() {
  spinner.style.display = 'block';
  setTimeout(removeThing, 2000)
}

// and `removeThing` removes the spinner
function removeThing() {
  spinner.style.display = 'none';  
}

DEMO

Answer 2

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

RE: Your comment about setTimeout()

To use setTimeout just once...

setTimeout(myfunction(), 2000);

Answer 3

You could try setting up CSS animation to do this. An explanation of CSS animation can be found here:

https://css-tricks.com/almanac/properties/a/animation/

Or use a setTimeout like this:

Javascript:

$('#something').hide();
$('#clicky').on('click', function () {
   $('#something').show();
    setTimeout(function () {
        $('#something').hide();
    }, 2000);
});

HTML:

<button id="clicky">Click me</button>

<p id="something">Boo!</p>

http://jsfiddle.net/jonnyknowsbest/kkqqjz0v/