javascript - 暂停和恢复本地存储中的计数值

Question

我正在使用此代码作为测验测试的倒计时器。其工作正常。在此我需要添加两个按钮，一个是“暂停”按钮，另一个是“恢复”按钮。当我单击“暂停”按钮时，它是停止时间；当我单击“恢复”按钮时，它是从我暂停的地方开始。

我已经尝试过这段代码。它不起作用。

HTML 代码

<div class="div__time">
    <div style="display: none;" id="overall_time"></div>
    <div id="overall_times"></div>
    <div class="total_time"></div>
</div>
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">

JS代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script>
    var speaking_ms = "00:00:10";
    var speaking_ms_arr = speaking_ms.split(":");
    var speaking_time_min_sec = (+speaking_ms_arr[0]) * 60 * 60 + (+speaking_ms_arr[1]) * 60 + (+speaking_ms_arr[2]);
    var speaking_time_min_sec = parseInt(speaking_time_min_sec) + 1;

    var speaking_value;

    if (localStorage.getItem("speaking_counter")) {
        if (localStorage.getItem("speaking_counter") <= 0) {
            speaking_value = speaking_time_min_sec;
        } else {
            speaking_value = localStorage.getItem("speaking_counter");
        }
    } else {
        speaking_value = speaking_time_min_sec;
    }

    document.getElementById('overall_time').innerHTML = speaking_value;

    var speaking_counter = function() {
        if (speaking_value <= 0) {
            localStorage.setItem("speaking_counter", speaking_time_min_sec);
        } else {
            speaking_value = parseInt(speaking_value) - 1;
            localStorage.setItem("speaking_counter", speaking_value);
        }
        document.getElementById('overall_time').innerHTML = speaking_value;
        if (speaking_value == 0) {
            localStorage.setItem("speaking_counter", speaking_value);
            setTimeout(function() {
                clearInterval(interval);
            }, 1000);
        }

        var hours = Math.floor(speaking_value / 3600);
        var minutes = Math.floor(speaking_value % 3600 / 60);
        var seconds = Math.floor(speaking_value % 3600 % 60);
        var red_time = hours + ' : ' + minutes + ' : ' + seconds;
        document.getElementById('overall_times').innerHTML = red_time;
    };

    var interval = setInterval(function() {
        speaking_counter();
    }, 1000);

    var Clock = {
        pause: function() {
                clearInterval(this.interval);
                delete this.interval;
            },

            resume: function() {
                if (!this.interval) this.start();
            }
    };

    $('#pauseButton').click(function() { Clock.pause(); });
    $('#resumeButton').click(function() { Clock.resume(); });
</script>

Fiddle Link

提前致谢。

Answer 1

我更改了 fiddle 中代码的结尾，它起作用了:https://jsfiddle.net/bohv0j9w/5/

    var Clock = {
        pause: function() {
                clearInterval(interval);
                interval = null;
            },

            resume: function() {
                if (!interval) interval = setInterval(speaking_counter, 1000);
            }
    };

document.querySelector('#pauseButton').addEventListener("click", Clock.pause);
document.querySelector('#resumeButton').addEventListener("click", Clock.resume);

在您的版本中，this.internal未定义，您可能想了解js中的“this”和作用域。 $(...) 是一种需要 lib jquery 的语法(不包含在 fiddle 中)，vanilla js 等效项是“document.querySelector”，您应该阅读有关此功能的 MDN 文章。最后，你的语法有点老派。如果您使用 localStorage，那么您的目标不是非常旧的浏览器，也许您应该避免使用 jquery 并使用诸如“const”之类的关键字。