Stopping a recurring ajax call

Question

I'm making an app where there's loads of products, each with a button. My plan is the user clicks one of the buttons and I have a javascript (jquery) function which starts making an ajax request every second using the id of the button as a parameter to identify the product.

The function I'm planning on using is the 2nd answer here Execute an Ajax request every second

The idea is to check the status of the product (which can change constantly) every second while the user is interested in it.

When the user clicks the button again I want to stop checking this particular product's status but I can't figure out how to do this. In my head I imagine the user might have clicked 3 buttons so there's 3 ajax requests every second happening, each with a different product id. How can I stop the recurring request which has the id of the product the user has clicked stop?

I so wanted to put a comment here that just said "42". Can you share, other than a link, what you have tried? Using `setInterval()` you can always use `clearInterval()` to stop a named interval. — Jay Blanchard, Jul 18 '14 at 12:31
The question you reference was "just for practice" they said. Calling a service every second, per user, is a really bad idea. Maybe signal-R for comms server=>client instead? — iCollect.it Ltd, Jul 18 '14 at 12:31
Do what Jay Blanchard said or use [setTimeout](https://developer.mozilla.org/en/docs/Web/API/window.setTimeout) and [clearTimeout](https://developer.mozilla.org/en/docs/Web/API/window.clearTimeout) if you chose some code from that link you posted. — machineaddict, Jul 18 '14 at 12:35

score 0 · Answer 1 · answered Jul 18 '14 at 12:42

I did something similar recently, where I had an interval running every few seconds and, when some event occurred, I stopped the process altogether. I'm assuming you're using Javascript, so something like the below. You can check "someVar" in the timer call if you wish, up to you...

   var someVar = false, intervalId;
    $(function () {
        // Attach event handler to button
        $('#ButtonId').click(function (e) {
            if (!someVar) {
                e.preventDefault();
                someVar = true;
                //Start interval
                intervalId = setInterval(CheckStatus, 3000);
            } else {
                // Stop the interval!
                clearInterval(intervalId);
                someVar = false;
            }
        });
    });

    function CheckStatus() {
        // I used MVC, but you can use whatever you need to generate the URL
        var checkUrl = '@Url.Action("CheckStatus", "SomeController", new { intervalId = "_intervalId_" })'.replace('_intervalId_', intervalId).replace(/&amp;/g, "&");

        $.ajax({
            url: checkUrl,
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                // do something with the status - data.Status perhaps?
            },
            error: function () {
                //handle error
            }
        });
    }

Stopping a recurring ajax call

1 Answers1