如何检查JavaScript手表是否正在运行

Question

我正在使用以下JavaScript时钟记录时间。我正在按按钮点击开始这个时钟。现在，如果此时钟不运行，我需要提醒用户。如何检查时钟的运行状态？

    function markPresent() {
        window.markDate = new Date();
        updateClock();
    }
    function updateClock() {
        var currDate = new Date();
        var diff = currDate - markDate;
        document.getElementById("test").innerHTML = format(diff / 1000);
        setTimeout(function () { updateClock() }, 1000);
    }
    function format(seconds) {
        var numhours = parseInt(Math.floor(((seconds % 31536000) % 86400) / 3600), 10);
        var numminutes = parseInt(Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), 10);
        var numseconds = parseInt((((seconds % 31536000) % 86400) % 3600) % 60, 10);
        return ((numhours < 10) ? "0" + numhours : numhours)
            + ":" + ((numminutes < 10) ? "0" + numminutes : numminutes)
            + ":" + ((numseconds < 10) ? "0" + numseconds : numseconds);
    }
<div id="divtimer" style="text-align:center">
  <p id="test"></p>
  <button type="button" class="btn btn-success" onclick=" markPresent()">Start</button>
</div>

Answer 1

好吧，我认为您的问题很简单，但是在查看您的代码时，我发现了我想提及的其他问题，以便您提高您的JavaScript技能。

首先全球事物。

始终使用JavaScript记住这一点，因为这是一个很好的做法，最好是首先定义您以后在代码中使用的内容。您的代码没有这个，因此，如果出于某种原因需要在其他地方实现它，则可能会有糟糕的时间。

html

由于我们的HTML不会发生很大变化，因此请确保我们的HTML就是这样：

<div id="divtimer" style="text-align:center">
    <p id="test"></p>
    <button type="button" class="btn btn-success" id="clock">Start</button>
</div>

我们HTML的唯一更改是将id="clock"属性添加到按钮。

javascript

因此，让我们定义我们将使用的每个DOM元素，时钟处理程序和控制变量：

var clockDiv = document.querySelector("#test"),
    button = document.querySelector("#clock"),
    clock = null, //Define a global variable for the clock
    isRunning = false, //You can view if clock is running from every scope 
    initTime = null;// Initial time of the clock

为什么时钟的全局变量？

要确保应用程序功能和应用程序性能之间的平衡，我们需要为setInterval()函数定义一个变量，以便您可以随时停止它，而不是即使您停止了时钟，也可以保持功能运行。

---

处理按钮。

为了防止DOM准备就绪时执行代码，我们可以在我们已经为时钟按钮定义的全局变量上调用事件侦听器：

button.addEventListener("click",Clock);

是的，那样简单。每次单击按钮时，这都会调用Clock()功能。

---

处理时钟((

这就是我在说的。由于我们已经定义了在代码其余的其余部分中需要使用的内容(全局变量(，因此现在可以检查Clock()函数，如果clock===null的值：

function Clock() {
    console.log("Called clock");
    if (clock != null) {
        //Clock is running
        console.log("Stopping clock");
        clearInterval(clock);
        clock = null;
        button.innerText = "Start";
        clockDiv.innerText = "";
        isRunning = false;
    } else {
        //Clock is not running
        console.log("Starting clock");
        setInitialTime();
        clock = setInterval(updateClock, 1000); // Starts calling updateClock, which should do what your need with the clock.
        button.innerText = "Stop"; //Changes the clock button text
        updateClock();
        isRunning = true;
    }
}

该按钮只有两个功能。停下来开始。因此，我们可以使用if语句检查时钟是否已经启动，并执行相反的操作。(如果停止，开始。。。。。

注意：

不使用Innerhtml。

在JavaScript中，这是一种非常糟糕的做法，因为使用InnerHTML将字符串中的所有内容解析为HTML将其放在DOM上。在小型应用程序中，它可能没有很大的效果，但是在使用innerHTML的生产中，可能会杀死应用程序功能和应用程序性能之间的平衡。

推荐使用：innertext。

---

更新时钟。

启动时钟时，我们调用了一个名为 setInitialTime()的函数，唯一的工作是将我们的全局变量initTime定义到我们单击按钮时的时间：

function setInitialTime() {
    initTime = new Date().getTime();
}

现在，要更新时钟，我们唯一需要做的就是比较给定的两个时间戳，并计算以下方面的区别：

function updateClock() {
    console.log("Clock update");
    let currTime = new Date().getTime(),
        diff = currTime - initTime;
    console.log(format(diff / 1000));
    clockDiv.innerText = format(diff / 1000);
}

和您的format()功能保持不变：

function format(seconds) {
    var numhours = parseInt(Math.floor(((seconds % 31536000) % 86400) / 3600), 10);
    var numminutes = parseInt(Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), 10);
    var numseconds = parseInt((((seconds % 31536000) % 86400) % 3600) % 60, 10);
    return ((numhours < 10) ? "0" + numhours : numhours) + ":" + ((numminutes < 10) ? "0" + numminutes : numminutes) + ":" + ((numseconds < 10) ? "0" + numseconds : numseconds);
}

所以您去了，那将是您的代码，并带有我所做的必要更改和建议。它的工作原理相同，但要注视着良好的表现。

注意：现在可以查看要检查时钟是否运行的变量isRunning。

请参阅其工作方式：

var clockDiv = document.querySelector("#test"),
    button = document.querySelector("#clock"),
    clock = null, //Define a global variable for the clock
    isRunning = false,
    initTime = null;
button.addEventListener("click", Clock);
function Clock() {
    console.log("Called clock");
    if (clock != null) {
        //Clock is running
        console.log("Stopping clock");
        clearInterval(clock);
        clock = null;
        button.innerText = "Start";
        clockDiv.innerText = "";
        isRunning = false;
    } else {
        //Clock is not running
        console.log("Starting clock");
        setInitialTime();
        clock = setInterval(updateClock, 1000); // Starts calling updateClock, which should do what your need with the clock.
        button.innerText = "Stop"; //Changes the clock button text
        updateClock();
        isRunning = true;
    }
}
function setInitialTime() {
    initTime = new Date().getTime();
}
function updateClock() {
    console.log("Clock update");
    let currTime = new Date().getTime(),
        diff = currTime - initTime;
    console.log("Actual time is " + currTime);
    console.log("Time inited was " + initTime);
    console.log(format(diff / 1000));
    clockDiv.innerText = format(diff / 1000);
}
function format(seconds) {
    var numhours = parseInt(Math.floor(((seconds % 31536000) % 86400) / 3600), 10);
    var numminutes = parseInt(Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), 10);
    var numseconds = parseInt((((seconds % 31536000) % 86400) % 3600) % 60, 10);
    return ((numhours < 10) ? "0" + numhours : numhours) + ":" + ((numminutes < 10) ? "0" + numminutes : numminutes) + ":" + ((numseconds < 10) ? "0" + numseconds : numseconds);
}

<div id="divtimer" style="text-align:center">
  <p id="test"></p>
  <button type="button" class="btn btn-success" id="clock">Start</button>
</div>

Answer 2

setTimeout(function () { checkClock() }, 2000);

var lastDiff = null;
function checkClock() {
    let currDiff = document.getElementById("test").innerHTML;
    if (currDiff == lastDiff) {
        alert('Clock is not running!');
    } else {
    lastDiff = currDiff;
    setTimeout(function () { checkClock() }, 2000);
}