切换按钮以开始/停止刷新我的页面

Question

I'm trying to make sort of a toggle button to start and stop a page from refreshing itself but for some reason the stopping process isn't working. is my logic correct?

this is my code:

<button id = "toggleButton" onclick = "initRefresh()" >  Stop Refresh </button>

    <script>
    function reloadUrl() {
        window.location.replace(
            [location.protocol, '//', location.host, location.pathname].join('')
        );

    }


    function initRefresh() {
        if ($('#toggleButton').text() == 'Start Refresh') {
            $('#toggleButton').text("Stop Refresh");
            t = window.setTimeout(reloadUrl, 45000);
        } else {
            $('#toggleButton').text("Start Refresh");
            clearTimeout(t);
        }
    };

    var t = window.setTimeout(reloadUrl, 45000); 

</script>

the default option (on first load) is on. so when the user goes into the page for the first time 45 seconds later the page will refresh.

Thanks for the help.

Answer 1

I believe the problem comes from the initialization of the t variable. You start a setTimeout when the page loads.

Change it to var t = null and the above code should work.

Answer 2

Your code (as in question) is working 100%.

But it will not work if placed your code inside $(document).ready event.