Question

I have a stopwatch feature that is toggled by a start/stop button. When the stop button is pushed, the timer stops, and jQuery inserts a row into a table that is preloaded onto the page.

I have another jQuery script running in the background that continously updates that table to maintain fresh data. It’s essentially a timekeeper.

However, the issue I have is that when a user pushes the stop button, the setInterval load keeps running, causing the added jquery field to disappear.

I have tried adding a variable to check if the stop button was pushed, and if so, stop the event…but since it’s already loaded in the DOM, it didn’t seem to work. Here’s the current code:

            $.ajax({
                url: 'getData.php',
                success: function(data) {
                    $("#timesheet").html(data);
                }
            });

            var refreshId = setInterval(function() {
                $.ajax({
                    url: 'getData.php?randval='+ Math.random(),
                    success: function(data) {
                        $("#timesheet").html(data);
                    }
                });
            }, 9000);

Here’s the HTML data that the ajax is loading:

<table>
<tr><th>Test</th></tr>
<tr><td>Test</td></tr>
</table>

I have also tried using append on tr:last, but that just appended it to the tr…rather than creating a new tr.

TL;DR: I want setInterval to not override the field that jQuery adds when a button is pushed, but can’t seem to do that since it’s coded to change the entire table.

Thanks for any suggestions.

Answer 1

ClearInterval explained

$('#button').click(function()
 {
     clearInterval(refreshId);
 });