Aborting Ajax requests

To prevent multiple or stale requests, it's often necessary to abort an ongoing Ajax request if the same event triggers a new one. This ensures only the latest request is processed.

Here's how to implement this pattern using jQuery:

var saveRequest = null;

function onUpdate() {
    if (saveRequest) {
        saveRequest.abort();
    }
    saveRequest = $.ajax(settings.submit_url, {
        success: function(data) {
            //do something
            saveRequest = null;
        }
    });
}

The modern fetch API achieves the same functionality using an AbortController signal:

let controller;

function onUpdate() {
    if (controller) {
        controller.abort();
    }
    // ensure a new controller is used for the new request
    controller = new AbortController();
    window.fetch(settings.submit_url, {
        signal: controller.signal,
        method: 'post',
        headers,
        body,
    })
    .then(response => {
        // do someThing
    });
}

Note

Be sure to instantiate a new controller instance after the previous one was aborted. It is not possible to reuse an aborted controller signal.

On this page

Navigation