Question

我需要在点击时调用微调器，它需要显示2秒然后消失。我不能使用setTimeout和setInterval ...还有其他功能吗？

Answer 1

好的，这是使用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：您对setTimeout（）的评论

只使用一次setTimeout ......

setTimeout(myfunction(), 2000);

Answer 3

您可以尝试设置CSS动画来执行此操作。可以在这里找到CSS动画的解释：

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

或者像这样使用setTimeout：

使用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/

如何调用持续2秒的功能？

3 个答案: