Question

昨天以前，我实际上从未用Java编写任何东西。我是全新的。我已经在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>

我想加入一种使计时器暂停和恢复的方法。

Answer 1

关于您的代码的几点评论。

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

尝试毫不干扰地管理您的事件（尽管有一种新的趋势可以内联地进行，例如使用React Components）。毫不夸张地说是什么意思？这意味着您可以在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代码中的计时器暂停操作的一般模式。

暂停和恢复setTimeout程序

1 个答案: