暂停和恢复 setTimeout 程序答案

【问题标题】：pausing and resuming a setTimeout program暂停和恢复 setTimeout 程序
【发布时间】：2019-04-09 19:15:50
【问题描述】：

在昨天之前，我真的从来没有用 Javascript 写过任何东西。我在这方面是全新的。我在 excel 中编写了宏，但我对计算机非常熟悉。我正在尝试编写一个程序，以便可以在浏览器中打开一个带有按钮的 HTML 文件。当我按下按钮时，我希望它从一个随机数开始倒计时，然后当倒计时结束时，它会发出哔声并从项目列表中随机选择一个文本。

我已经完成了大部分工作（记住这是我的第一个程序），但我想加入一个功能，让我可以暂停计时器，以便稍后恢复。我在这里包含了一些有效的数字，但这只是测试。

我一直在网上查看其他“暂停和恢复”风格的问题，但我有点困惑。这对我来说超级新鲜。

到目前为止，这是我的程序....

<html>
<body>

<h2>Javascript CART breakdown calculator</h2>

<p id="demo"></p>
<p id="breakdown_item"></p>

<button onclick="setTimeout(myFunction, my_random_number*1000);">start timer</button>

<script>
var my_random_number, low, high;
low = 1;
high = 5;
my_random_number = Math.floor(Math.random() * high) + low;
document.getElementById("demo").innerHTML = my_random_number;

var audioCtx = new (window.AudioContext ||  window.webkitAudioContext)();

function myFunction(frequency, duration, callback) {
    duration = 10000 / 1000;     // the 10000 used to be 'duration' 

    // create Oscillator node
    var oscillator = audioCtx.createOscillator();

    oscillator.type = 'square';
    oscillator.frequency.value = 500; // value in hertz
    oscillator.connect(audioCtx.destination);

    oscillator.onended = callback;
    oscillator.start(0);
    oscillator.stop(audioCtx.currentTime + duration);

    var random_breakdown_event, low_event, high_event;
    low_event = 1
    high_event = 9
    random_breakdown_event = Math.floor(Math.random() * high_event) + low_event;

    var text
    if (random_breakdown_event == 1) text = "blown engine";
    if (random_breakdown_event == 2) text = "broken transmission";
    if (random_breakdown_event == 3) text = "broken suspension";
    if (random_breakdown_event == 4) text = "broken halfshaft";
    if (random_breakdown_event == 5) text = "broken cv joint";
    if (random_breakdown_event == 6) text = "broken wings";
    if (random_breakdown_event == 7) text = "electrical misfire";
    if (random_breakdown_event == 8) text = "broken fuel pump";
    if (random_breakdown_event == 9) text = "change battery";

    document.getElementById("breakdown_item").innerHTML = text

}

</script>

</body>
</html>

我想加入一种方法来让这个计时器暂停和恢复。

【问题讨论】：

我打算用这个试试别的，但我还是卡住了。

标签： javascript button settimeout resume pause

【解决方案1】：

关于您的代码的几个 cmets。

1) 按钮事件管理（对所有事件管理都有效）

尝试不显眼地管理您的事件（尽管有一种新趋势是内联，例如使用 React 组件）。毫不掩饰是什么意思？这意味着您在 javascript 块内定义 HTML 之外的代码事件。

例如，如果您将 id="button-timer" 分配给您的按钮，您可以执行以下操作：

<script>
     var button = document.getElementById('button-timer');
     button.addEventListener('click', myFunction);
</script>

然后在您的myFunction 中，您可以指定setTimeout。 setTimeout 函数返回一个值，您以后可以使用名为clearTimeout(<timer-reference>) 的函数来暂停/删除超时。因此，这为您提供了有关如何暂停/控制超时的提示。

2) 不用这么多 if's() ，只需使用 Switch 语句。所以你会做这样的事情：

switch(random_breakdown_event){
    case 1 : // some code;
        break;
    case 3 : // some code
       break;
    default: // default case action
}

所以提示您如何管理暂停/停止过程，

<button id="button-timer">Start timer</button>
<script>
     var timer=null;

     function myFunction(){
          // Your function does stuff     
     }
     function buttonEventHandler(){
          timer = setTimeout('myFunction', <some-random-time>);
     }
     function pauseStop(){
         clearInterval(timer);
     }
     var button = document.getElementById('button-timer');
     button.addEventListener('click', buttonEventHandler);
</script>

这将是关于如何在 js 代码中控制计时器暂停操作的一般模式。

【讨论】：

实际上这不是针对任何类型的课程——它是针对我喜欢的游戏（实际上是一个非常古老的 MS dos 游戏）。我自己学习所有这些我只选择了javascript，因为我使用dosbox玩这个游戏，当dosbox打开时，来自网页的声音会覆盖游戏的声音。我想我可以通过在单独的窗口中打开 html 文件并在其前面最大化 dosbox 来在后台运行它。这是一款赛车游戏，但汽车从不抛锚。我的想法是让它在随机的时间后分解。我希望能够暂停它。
不，我提到了家庭作业。就像有人为你做某事，让你从思考过程中解放出来。
老实说，我对您发布的内容一无所知。这不是我的强项。我是一个动手的人
我在答案末尾添加了一些代码，根据实际代码为您提供更好的线索。
最后你有更好的代码，它会提示你如何控制计时器。