How to pause a setTimeout function

Question

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>

Possible duplicate of http://stackoverflow.com/questions/3969475/javascript-pause-settimeout — Ruslan Abuzant, Jan 12 '17 at 03:31
Check this answer http://stackoverflow.com/questions/3969475/javascript-pause-settimeout#answer-3969760 — NewToJS, Jan 12 '17 at 03:32
@NewToJS I have read it but i dont understand how i should do it with my code, i need some extra help sorry, im very new to javascript! — Mathias Hermansen, Jan 12 '17 at 03:38

Kim Yin · Accepted Answer · 2017-01-12T07:37:27.973

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>

timedText is not defined comes up when i press the start button now.. I cant see what wrong here sorry — Mathias Hermansen, Jan 12 '17 at 07:10
now i get "Unexpected identifier" and "Timer is not defined" — Mathias Hermansen, Jan 12 '17 at 07:41
Can i ask how i should do it if i want an `addEventListener` instead of `onclick="timer.stop();"` - I tried it like this: `` and the javascript code like this: `var startbtn = document.getElementById("startbtn");` and `startbtn.addEventListener("click", Timer.stop());` but it will not work — Mathias Hermansen, Jan 14 '17 at 04:26
startbtn.addEventListener("click", function () {Timer.stop();}) — Kim Yin, Jan 14 '17 at 08:41

score 0 · Answer 2 · answered Jan 12 '17 at 07:52

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

How to pause a setTimeout function

2 Answers2

Linked