How to pause a setTimeout function

2019-07-27 04:22发布

I have this code to start a setTimeout function with a button and to stop it with another button, but if I stop it and start it, it will start over, Is there any way to get a pause/continue button?

Javascript code:

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 buttons:

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

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

2条回答
姐就是有狂的资本
2楼-- · 2019-07-27 04:59

Add breakpoint variable status which save last doing operation

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>';
}
查看更多
女痞
3楼-- · 2019-07-27 05:08

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
    }
})();

Use like below:

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

查看更多
登录 后发表回答