暂停和恢复setTimeout程序

Question

Before yesterday I literally have never written anything with Javascript. 在昨天之前，我从未用Javascript写过任何东西。 I am brand new at this. 我是全新的。 I have written macros in excel but I am very familiar with computers. 我在excel中编写过宏，但我对计算机非常熟悉。 I am trying to write a program so I can have an HTML file open in my browser that will have a button. 我正在尝试编写程序，因此我可以在浏览器中打开一个HTML文件，该文件将有一个按钮。 When I press the button I want it to count down from a random number, and then when the count down is over it will play a beep and randomly pick a text from a list of items. 当我按下按钮时，我希望它从一个随机数倒计时，然后当倒计时结束时，它会发出一声嘟嘟声并随机从一个项目列表中选择一个文本。

I have most of this down and working (remember this is my first ever program) but I want to incorporate a feature that allows me to pause the timer so I can resume it later. 我大部分时间都处于工作状态（请记住这是我的第一个程序）但是我希望合并一个允许我暂停计时器的功能，以便稍后恢复。 I have included some numbers here that work but this is just testing. 我在这里包含了一些有用的数字，但这只是测试。

I have been looking online at other "pause and resume" style questions but I'm a little confused. 我一直在网上看其他“暂停和恢复”风格的问题，但我有点困惑。 This is super new to me. 这对我来说太新了。

Here is my program so far.... 这是我迄今为止的计划....

<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>

I would like to incorporate a way to make this timer pause and resume. 我想采用一种方法使这个计时器暂停和恢复。

Answer 1

A couple of comments in regards your code. 关于您的代码的一些评论。

1) Button event management (valid for all event management) 1）按钮事件管理（适用于所有事件管理）

Try to manage your events unobstrusively (although there's a new tendency to do it inline, for instance with React Components). 尝试以不引人注意的方式管理您的事件（尽管有一种新的倾向，即内联，例如使用React组件）。 What unobstrusively means? 什么不引人注目的意思？ It means you define your code events outside of the HTML, within the javascript block. 这意味着您在javascript块中定义HTML之外的代码事件。

For instance, if you assign the id="button-timer" to your button you can do something like this: 例如，如果您将id =“button-timer”分配给按钮，则可以执行以下操作：

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

Then inside your myFunction you can specify the setTimeout. 然后在myFunction中指定setTimeout。 The setTimeout function returns a value you can later use to pause/remove the timeout with a function named clearTimeout(<timer-reference>) . setTimeout函数返回一个值，稍后您可以使用名为clearTimeout(<timer-reference>)的函数暂停/删除超时。 So this gives you a hint on how to pause/control the timeouts. 因此，这为您提供了如何暂停/控制超时的提示。

2) Instead of so many if's() just use a Switch statement. 2）而不是那么多if if（）只使用Switch语句。 So you would do something like: 所以你会做类似的事情：

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

So hinting you on how to manage a pause/stop process, 所以暗示你如何管理暂停/停止过程，

<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>

This would be a general schema on how your'd control a timer pause action in js code. 这将是关于如何控制js代码中的计时器暂停操作的一般模式。

暂停和恢复setTimeout程序

问题描述

1 个解决方案

解决方案1
0 2019-04-09 19:31:13

暂停和恢复setTimeout程序

问题描述

1 个解决方案

解决方案1 0 2019-04-09 19:31:13

解决方案1
0 2019-04-09 19:31:13