javascript - 显示按钮几秒钟，然后重置屏幕

Question

我有一段代码可以让我的计数器工作 2 分钟。 2 分钟结束后，会出现一个警告框，通知时间已完成。

我想做的是，当出现警告框并且用户单击“确定”并返回到屏幕时，我想让 2 个按钮消失，只保留一个按钮。到目前为止，我已经能够做到这一点，但这部分(也通过注释黑白代码表示)应该只停留 20 秒，之后屏幕应该自动重置。

我正在使用的代码是

    var ticker = function() 
        {
            counter--;
            var t = (counter / 60) | 0; // it is round off
            digits.eq(0).text(t);
            t = ((counter % 60) / 10) | 0;
            digits.eq(2).text(t);
            t = (counter % 60) % 10;
            digits.eq(3).text(t);
            if (!counter) 
                {
                    clearInterval(timer);
                    alert('Sorry, time is out.');

/***3 lines given below should stay for 20 sec and after that the screen should get reset***/ 

                        $("#count").hide(); 
                        $("#walkaway").show(); 
                        $("#submitamt").hide();


                }
        };

Answer 1

您应该使用setTimeout而不是setInterval。这有效吗？

$(function () {
  setTimeout(function () {
    alert("Alert came after 2 mins.");
    $(".after-2mins").show();
    setTimeout(function () {
      location.href = location.href;
    }, 2000);
  }, 5000);
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
.hidden {display: none;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p>Wait for 2 mins. 5 seconds in this demo.</p>
<div class="after-2mins hidden">
  <p>2 mins over. Displaying 2 buttons. After 20 seconds, everything will reload. It is 2 seconds in this demo.</p>
  <input type="button" value="Button1" />
  <input type="button" value="Button2" />
</div>