Pausing a timer

Question

I have a page with two tabs that refreshes via timer every thirty seconds. I need to pause/cancel it when either tab-1 is selected or when data is being edited and restart it when tab-0 is selected or when the edit is saved.

The timer variable is in the .html file, the calls to start/stop are in the .js file.

HTML file:

    <script>
        var interval = setTimeout(function() {
            window.location.reload(1);
        }, 30000);
    </script>

.js file:

The tab timer stop works:

jQuery(document).ready(function() {
    jQuery('#tabs').on("click", function() {
        var tabIndex = (jQuery("#tabs").tabs('option', 'active'));
        if (tabIndex === 0) {
            interval = setTimeout(function() {
                window.location.reload(1);
            }, 30000);
        } else {
            window.clearInterval(interval);
        }
    });
});

However, the edit timer stop doesn't work:

jQuery.ajax({
    url: 'HandbookServlet',
    type: 'POST', data: {formType: "getRecord",
        id: id
    },
    dataType: 'json',
    async: false,
    success: function(responseText) {
        var obj = JSON.stringify(responseText);
        var obj2 = JSON.parse(obj);
        jQuery('#lblEditDate').text(obj2.strDateSigned);
        jQuery('#taEditComment').val(obj2.comment);
        jQuery('#divAlert').show();
        window.clearInterval(interval); //stop timer doesn't work here

    }, error: function(request, status, error) {
        alert("An error occurred.  Error:  " + status + ", " + error);
    }
});

There's no errors generated. Does "window.clearInterval" only work via "jQuery(document).ready"?

Does this answer your question? [javascript: pause setTimeout();](https://stackoverflow.com/questions/3969475/javascript-pause-settimeout) — ublec, May 05 '21 at 19:29
@ublec: Not really. The timer stop DOES work, but only in the document ready code. In the function with the ajax call, it doesn't work. — Bob Stout, May 05 '21 at 19:39
Looks to me like it might be a scope issue. Where is your `interval` defined? Is the `interval` you're accessing within the Ajax Success Callback the same `interval` you are storing the `setTimeout` reference in? — Alain Doe, May 05 '21 at 20:08
@AlainDoe: The variable is set in the .html file. The document ready and ajax function are in the .js file. (I've updated the question with that info) However, it does work in document ready. If the variable can be seen there, shouldn't it be able to be seen in the ajax function? — Bob Stout, May 05 '21 at 20:43
First, `clearTimeout` and `clearInterval` ain't interchangeable. You can't stop `setTimeout` with `clearInterval`. Second. In your `click`-handler you're overwriting `interval` with a new value, without stopping the previous one; like from a previous click, or the one from the html-file. There's no harm in clearing a timeout that doesn't exist anymore. — Thomas, May 06 '21 at 08:31

Bob Stout · Accepted Answer · 2021-05-06T15:20:29.770

The issue wasn't with scope or the timer itself (rather it was "operator headspace and timing").

The problem was that the edit button was on tab0 (which wasn't mentioned in my original question). When that button was clicked, the event propagated to the tab, firing the code in document.ready and restarting the timer after the timer had been stopped in the function.

To fix the problem, I sent the click event to the function and used event.stopPropagation() to prevent the tab from picking up the click:

function displayRecord(e, id) {
    e.stopPropagation();
    stopTimer();
    jQuery.ajax({
        url: 'HandbookServlet',
        type: 'POST', data: {formType: "getRecord",
            id: id
        },
        dataType: 'json',
        async: false,
        success: function(responseText) {
            var obj = JSON.stringify(responseText);
            var obj2 = JSON.parse(obj);

            jQuery('#itemId').val(id);
            jQuery('#lblEditDate').text(obj2.strDateSigned);
            jQuery('#taEditComment').val(obj2.comment);
            jQuery('#divAlert').show();
        }, error: function(request, status, error) {
            alert("An error occurred.  Error:  " + status + ", " + error);
        }
    });
}

Pausing a timer

1 Answers1