4

In order to code posted by Wiktor (https://stackoverflow.com/a/43338063/7666076) how to pause and resume sending ajax requestes after click on some button (two different buttons like 'pause' and 'play').

Also how to break the current ajax request immediatelly after click on "pause" button. I don't want to wait for new data which will be fetched by ajax query.

Here is my adapted code:

function RefreshData()
{
    console.log('Sending AJAX request...');
    $.ajax({
        type: "GET",
        url: "getAjaxRequest.php?"+device+"&callback=?",
        dataType: "jsonp"
    }).done(function(dataJSON) {
        adaptJsonData(dataJSON);
        console.log('success');
    }).fail(function() {
        console.log('error');
    }).always(function() {
        intervalTime = 100;
        console.log('Waiting '+intervalTime+' miliseconds...');
        setTimeout(RefreshData, intervalTime);
    });

    return true;
}

function adaptJsonData(dataJSON) {
    # ... some logic with dataJSON object
}
Pirum
  • 119
  • 1
  • 8

2 Answers2

1
var xhr = null;
function RefreshData() {
    if( xhr != null ) {
       xhr.abort();
        xhr = null;
    }
    xhr = $.ajax({'...'});
}
Beneris
  • 627
  • 4
  • 11
  • 4
    While this code may answer the question, providing additional context regarding how and why it solves the problem would improve the answer's long-term value. – SherylHohman Mar 07 '18 at 18:13
1

The Beneris answer is quite good for aborting current $.ajax request, but this not resolve the setTimeout(function, time) usage in .always function.

So I've solved my problem by:

  1. Define global variables: var xhr = null - which handling ajax xhr object, and var timer - which handling setTimeout reference.

  2. As Beneris advice, assign the $.ajax({...}) to the xhr variable:

var xhr = null; // global variable
var timer; // global variable
function RefreshData() {
    xhr = $.ajax({...});
}
  1. In .always() method assing timer reference to setTimeout()
xhr = $.ajax({})
    .done(function(){})
    .fail(function(){})
    .always(function(){
        timer = setTimeout(RefreshData, 100);//refresh every 100 msec
    });
  1. Now I can manipulate the ajax requests using jQuery by:
$('button.pause').click(function() {
    xhr.abort(); // xhr is in global scope; remove/comment this line if You don't need to abort last ajax request
    xhr = null; // remove/comment this line too if You don't need to abort last ajax request
    clearTimeout(timer); // timer variable is the reference to setTimeout
});
$('button.resume').click(function() {
    RefreshData();
});

If somebody need this functionality without aborting last ajax request, just delete the line xhr.abort().

How it works?

Aborting the current ajax request:

The $.ajax() function returns the XMLHttpRequest object that it creates. Normally jQuery handles the creation of this object internally, but a custom function for manufacturing one can be specified using the xhr option. The returned object can generally be discarded, but does provide a lower-level interface for observing and manipulating the request. In particular, calling .abort() on the object will halt the request before it completes.

http://api.jquery.com/jquery.ajax/

Destroy the setTimeout method for stop refreshing:

To clear some setTimeout stuff, just use clearTimeout(<the_setTimeout_reference>)

https://www.wittysparks.com/forums/topic/how-to-kill-or-cancel-or-remove-settimeout-with-cleartimeout/

Pirum
  • 119
  • 1
  • 8