如果弹出窗口关闭，Javascript 停止/重置计时器

Question

嘿伙计们，我是 JavaScript 新手，但我想完成一些事情

我有这个 JavaScript 计时器脚本，我想打开一个弹出窗口并在单击按钮时启动计时器，如果我打开的弹出窗口关闭，还可以重置并停止计时器。

这是我的计时器代码:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var isWaiting = false;
var isRunning = true;
var seconds = 15;
var countdownTimer;
var finalCountdown = false;

function GameTimer() {
    var minutes = Math.round((seconds - 30) / 60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }
    document.getElementById('waiting_time').innerHTML = "<i class='fa fa-spin fa-spinner'></i> " + minutes + ":" + remainingSeconds;
    if (seconds == 0) {
                    document.getElementById('waiting_time').innerHTML = "" ;
                    document.getElementById('step').innerHTML = "<button class='button' onclick='window.location.reload();return false;'><font color='#8d9d29'><i class='fa fa-arrow-circle-right'></i> Next step</font></button>" ;
        if (finalCountdown) {
            clearInterval(countdownTimer);
        } else {
            finalCountdown = true;
        }

    } else {
        isWaiting = true;
        seconds--;

        if (seconds == 0) {
            seconds=seconds;}     


    }
}
countdownTimer = setInterval(GameTimer, 1000);
}//]]>  

</script>

这会检查弹出窗口是否已关闭

var child = window.open('http://google.com/','','toolbar=0,status=0,width=926,height=536');
    var timer = setInterval(checkChild, 500);
    function checkChild() {
        if (child.closed) {
            /// something 
            clearInterval(timer);
        }
     }

如何合并这两个片段？

Answer 1

我不太确定这是否是您正在寻找的。我不知道我是否明白你需要什么。

我稍微重构了代码。最主要的是我将变量放入名为 GameObject

的全局对象中

<script type='text/javascript'>//<![CDATA[ 
    var GameObject = {
        "isWaiting" : false,
        "isRunning" : true,
        "seconds" : 15,
        "finalCountdown" : false,
        "child" : null,
        "countdownTimer" : null,
        "gametimer" : null
    };

    function onButtonClick() {
        //Open the window
        GameObject.child = window.open('http://google.com/','','toolbar=0,status=0,width=926,height=536');

        //Start the window open check interval
        GameObject.gametimer = setInterval(function() {
            if (GameObject.child.closed) {
                /// something 
                clearInterval(GameObject.gametimer);
                clearInterval(GameObject.countdownTimer);
            }
        }, 500);

        //Start the game timer
        GameObject.countdownTimer = setInterval(GameTimer, 1000);
    }

    function GameTimer() {
        var minutes = Math.round((GameObject.seconds - 30) / 60);
        var remainingSeconds = GameObject.seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('waiting_time').innerHTML = "<i class='fa fa-spin fa-spinner'></i> " + minutes + ":" + remainingSeconds;
        if (GameObject.seconds == 0) {
            document.getElementById('waiting_time').innerHTML = "" ;
            document.getElementById('step').innerHTML = "<button class='button' onclick='window.location.reload();return false;'><font color='#8d9d29'><i class='fa fa-arrow-circle-right'></i> Next step</font></button>" ;

            if (GameObject.finalCountdown) {
                clearInterval(GameObject.countdownTimer);
            } else {
                GameObject.finalCountdown = true;
            }

        } else {
            GameObject.isWaiting = true;
            GameObject.seconds--;

            if (GameObject.seconds == 0) {
                GameObject.seconds = GameObject.seconds;
            }
        }
    }
//]]>
</script>