如何暂停 setTimeout 函数答案

【问题标题】：How to pause a setTimeout function如何暂停 setTimeout 函数
【发布时间】：2017-05-27 01:18:59
【问题描述】：

我有这段代码用一个按钮启动setTimeout 函数并用另一个按钮停止它，但是如果我停止它并启动它，它将重新开始，有没有办法获得暂停/继续按钮?

Javascript 代码：

var timeout1, timeout2, timeout3;

function timedText() {
    timeout1 = setTimeout(desertAK, 1000) 
    timeout2 = setTimeout(fourAlarmShotgun, 5000) 
    timeout3 = setTimeout(frostbiteAR, 9000)
}

function stopTimeout() {
    clearTimeout(timeout1);
    clearTimeout(timeout2);
    clearTimeout(timeout3);
 }

function desertAK() {
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Desert%20Warfare%20AK-47%22"></iframe>';
 }
function fourAlarmShotgun() {
    document.getElementById("leser2").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Four%20Alarm%2012GA%20Pump%20Shotgun%22"></iframe>';
}
function frostbiteAR() {
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Frostbite%20AR-15%22"></iframe>';
}

HTML 按钮：

  <button onclick="timedText()">Start</button>

  <button onclick="stopTimeout()">Stop</button>

【问题讨论】：

stackoverflow.com/questions/3969475/javascript-pause-settimeout的可能重复
查看这个答案stackoverflow.com/questions/3969475/…
@NewToJS 我已经阅读了它，但我不明白我应该如何使用我的代码，我需要一些额外的帮助对不起，我对 javascript 很陌生！

标签： javascript settimeout

【解决方案1】：

var Timer = (function () {
    var isExeced = [1,1,1];
    var timeout1, timeout2, timeout3;
    var startTime, costTime = 0;
    var finished = false;
    var status = 0;

    function reset () {
        costTime = 0;
        status   = 0;
        finished = false;
        isExeced = [1,1,1];
    }

    function desertAK () {
        document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Desert%20Warfare%20AK-47%22"></iframe>';
    }

    function fourAlarmShotgun () {
        document.getElementById("leser2").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Four%20Alarm%2012GA%20Pump%20Shotgun%22"></iframe>';
    }

    function frostbiteAR () {
        document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Frostbite%20AR-15%22"></iframe>';
    }

    function timedText () {
        if (finished) {
            return resume();
        }

        if (status === 1) {
            return;
        } else {
            status = 1;
        }

        startTime = +new Date();
        
        if (isExeced[0]) {
            timeout1 = setTimeout(function () {
                isExeced[0] = 0;
                desertAK();
            }, 1000 - costTime);
        }

        if (isExeced[1]) {
            timeout2 = setTimeout(function () {
                isExeced[1] = 0;
                fourAlarmShotgun();
            }, 5000 - costTime);
        }

        if (isExeced[2]) {
            timeout3 = setTimeout(function () {
                isExeced[2] = 0;
                finished = true;
                status = 0;
                frostbiteAR();
            }, 9000 - costTime);
        }
    }

    function stopTimeout () {
        costTime += +new Date() - startTime;
        status = 0;

        clearTimeout(timeout1);
        clearTimeout(timeout2);
        clearTimeout(timeout3);
    }

    function resume () {
        stopTimeout();
        reset();
        timedText();
    }

    return {
        start:  timedText,
        stop:   stopTimeout,
        resume: resume
    }
})();

如下使用：

<button onclick="Timer.start();">Start</button>
<button onclick="Timer.stop();">Stop</button>

【讨论】：

timedText is not defined 当我现在按下开始按钮时出现..我看不出这里有什么问题抱歉
现在我得到“意外的标识符”和“未定义定时器”
如果我想要 addEventListener 而不是 onclick="timer.stop();"，我能问我应该怎么做 - 我试过这样：<button class="startBtn" id="startbtn">Start</button> 和这样的 javascript 代码：var startbtn = document.getElementById("startbtn"); 和 @ 987654327@ 但它不起作用
startbtn.addEventListener("click", function () {Timer.stop();})

【解决方案2】：

添加保存上次执行操作的断点变量状态

var timeout1, timeout2, timeout3;
var status = 0;

function timedText() {
    if(status + 1 == 1) {
        timeout1 = setTimeout(desertAK, 1000) 
        timeout2 = setTimeout(fourAlarmShotgun, 5000) 
        timeout3 = setTimeout(frostbiteAR, 9000)
    } else if(status == 2) {        
        timeout2 = setTimeout(fourAlarmShotgun, 5000) 
        timeout3 = setTimeout(frostbiteAR, 9000)
        timeout1 = setTimeout(desertAK, 1000) 
    } else {        
        timeout3 = setTimeout(frostbiteAR, 9000)
        timeout1 = setTimeout(desertAK, 1000) 
        timeout2 = setTimeout(fourAlarmShotgun, 5000) 
    }    
}

function stopTimeout() {
    clearTimeout(timeout1);
    clearTimeout(timeout2);
    clearTimeout(timeout3);
 }

function desertAK() {
    status = 0;
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Desert%20Warfare%20AK-47%22"></iframe>';
 }
function fourAlarmShotgun() {
    status = 1;
    document.getElementById("leser2").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Four%20Alarm%2012GA%20Pump%20Shotgun%22"></iframe>';
}
function frostbiteAR() {
    status = 2;
    document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Frostbite%20AR-15%22"></iframe>';
}

【讨论】：