javascript - 使用 onclick 按钮重置 setInterval

Question

我正在尝试修改脚本并使用 onclick 按钮重置 setInterval 。我想做的是清除间隔并从头开始(状态 1)，但我不知道如何做..

        var face = 0;
        var t = 100;
        var status = 0;
        var tInt = 100;

        (function () {
            var element = document.getElementById("header");
            element.style.top = (window.innerHeight/2 - element.clientHeight/2) + "px";

            intro.play();

            var analysis = setInterval(function() {
                    if (status > 0) {
                    t = face ? t + tInt : 0;

                    var element = document.getElementById("header");

                    if (status == 1) {
                        element.innerHTML = '<p class="spectrum title">MONTREZ VOTRE VISAGE</p>';
                        element.style.top = (window.innerHeight/2 - element.clientHeight/2) + "px";
                        intro.stop();
                        scan.stop();
                        wait.play();
                        status = 2;
                    } else if (status == 2 && t > 0 && t < 5000) {
                        element.innerHTML = '<p class="spectrum">Analyse en cours</p><p class="spectrum">PATIENTEZ...</p>';
                        element.style.top = (window.innerHeight - element.clientHeight - 48) + "px";
                        wait.stop();
                        scan.play();
                        status = 3;
                    } else if (status == 3 && t >= 5000) {
                        element.innerHTML = '<p class="perdu">DÉSOLÉ</p><p class="perdu title">Votre visage n\'est pas conforme!</p>';
                        element.style.top = (window.innerHeight - element.clientHeight - 48) + "px";
                        scan.stop();
                        theme.play();
                        status = 4;
                        clearInterval(analysis);
                    } else if (status == 3 && t == 0) {
                        status = 1;
                    }
                }
            }, tInt);

Answer 1

您只需向按钮添加单击事件，然后重置单击事件内的操作和 t 值

html

<button id="btnReset" onclick="resetValue();">Reset</button>

将此额外函数添加到 JavaScript

function resetValue() {
    action = 1;
    t = 0;
    // stop started items
    intro.stop();
    wait.stop();
    scan.stop();
    theme.stop();
    // clear elements
    var element = document.getElementById("header");
    if (element) {
        element.innerHTML = '';
        element.style.top = (window.innerHeight/2 - element.clientHeight/2) + "px";
    }
    // restart intro
    intro.play();
};

这应该重置为开始，同时继续间隔循环

添加了一个jsfiddle http://jsfiddle.net/Icepickle/GaQEp/它通过开始/停止/重置按钮和一些 moked 功能来显示这一点。不过，确实部分重建了您的脚本:)