Question

我有这个代码用一个按钮启动一个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>

Answer 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>

Answer 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>';
}

如何暂停setTimeout函数

2 个答案: