End all occurrences of XMLHttpRequest

Question

End all occurrences of XMLHttpRequest

In my code, I am calling the function SigWebRefresh at specific intervals of 50 milliseconds.

tmr = setInterval(SigWebRefresh, 50);

The function SigWebRefresh utilizes XMLHTTPRequest:

function SigWebRefresh(){   
    xhr2 = new XMLHttpRequest();    
    xhr2.open("GET", baseUri + "SigImage/0", true );
    xhr2.responseType = "blob"; 
    xhr2.onload = function (){
        var img = new Image();      
        img.src = getBlobURL(xhr2.response);        
        img.onload = function (){           
           Ctx.drawImage(img, 0, 0);
           revokeBlobURL( img.src );
           img = null;
        }
    }   
    xhr2.send(null);
}

To stop the interval set by setInterval(), I have used the clearInterval method like this:

 clearInterval(tmr);

Although xhr2.abort(); can abort one instance of the XMLHttpRequest, I am looking for a way to abort all uncompleted XmlHttpRequest. How can I achieve this?

javascript ajax xmlhttprequest abort thread-abort

Answer 1

Answer №1

For better organization, consider adding each xhr2 variable to an array and using Array.prototype.forEach to stop each xhr2 variable.

var requests = [];

function RefreshData(){   
    xhr2 = new XMLHttpRequest();
    requests.push(xhr2);    
    xhr2.open("GET", baseUri + "DataImage/0", true );
    xhr2.responseType = "blob"; 
    xhr2.onload = function (){
        var image = new Image();      
        image.src = getBlobURL(xhr2.response);        
        image.onload = function (){           
           Ctx.drawImage(image, 0, 0);
           revokeBlobURL( image.src );
           image = null;
        }
    }   
    xhr2.send(null);
}

// Stop all requests
requests.forEach(function(req) {
  req.abort()
})

Answer 2

For better organization, consider adding each xhr2 variable to an array and using Array.prototype.forEach to stop each xhr2 variable.

var requests = [];

function RefreshData(){   
    xhr2 = new XMLHttpRequest();
    requests.push(xhr2);    
    xhr2.open("GET", baseUri + "DataImage/0", true );
    xhr2.responseType = "blob"; 
    xhr2.onload = function (){
        var image = new Image();      
        image.src = getBlobURL(xhr2.response);        
        image.onload = function (){           
           Ctx.drawImage(image, 0, 0);
           revokeBlobURL( image.src );
           image = null;
        }
    }   
    xhr2.send(null);
}

// Stop all requests
requests.forEach(function(req) {
  req.abort()
})

Answer 3

Answer №2

If you want to manage a list of processing requests, you can follow these steps:

function removeElement(array, item){
    var index = array.indexOf(item);
    if (index > -1) {
        array.splice(index, 1);
    }
}

var all_processing = [] // Store all processing requests
function UpdateRequests(){   
    var xhr = new XMLHttpRequest();    
    xhr.open("GET", baseUri + "Image/0", true );
    xhr.responseType = "blob"; 
    xhr.onload = function (){
        var img = new Image();      
        img.src = getBlobURL(xhr.response);        
        img.onload = function (){           
           Ctx.drawImage(img, 0, 0);
           revokeBlobURL( img.src );
           img = null;
           removeElement(all_processing, xhr); // Remove finished requests from the list
        }
    }   
    xhr.send(null);
    all_processing.push(xhr); // Add request to the list
}

To clear the list:

for(var i in all_processing)
    all_processing[i].abort();
all_processing = [] // Clear the list of requests

Answer 4

If you want to manage a list of processing requests, you can follow these steps:

function removeElement(array, item){
    var index = array.indexOf(item);
    if (index > -1) {
        array.splice(index, 1);
    }
}

var all_processing = [] // Store all processing requests
function UpdateRequests(){   
    var xhr = new XMLHttpRequest();    
    xhr.open("GET", baseUri + "Image/0", true );
    xhr.responseType = "blob"; 
    xhr.onload = function (){
        var img = new Image();      
        img.src = getBlobURL(xhr.response);        
        img.onload = function (){           
           Ctx.drawImage(img, 0, 0);
           revokeBlobURL( img.src );
           img = null;
           removeElement(all_processing, xhr); // Remove finished requests from the list
        }
    }   
    xhr.send(null);
    all_processing.push(xhr); // Add request to the list
}

To clear the list:

for(var i in all_processing)
    all_processing[i].abort();
all_processing = [] // Clear the list of requests

Answer 5

Answer №3

 let httpRequest = null;

 function RefreshSignature(){  
      if( httpRequest != null ) {
            httpRequest.abort();
            httpRequest = null;
      }
      httpRequest = new XMLHttpRequest();    
      httpRequest.open("GET", baseURL + "SignImage/0", true );
      httpRequest.responseType = "blob"; 
      httpRequest.onload = function (){
        let image = new Image();      
        image.src = createBlobURL(httpRequest.response);        
        image.onload = function (){           
           Context.drawImage(image, 0, 0);
           revokeBlobUrl( image.src );
           image = null;
        }
     }   
     httpRequest.send(null);
 }

Answer 6

 let httpRequest = null;

 function RefreshSignature(){  
      if( httpRequest != null ) {
            httpRequest.abort();
            httpRequest = null;
      }
      httpRequest = new XMLHttpRequest();    
      httpRequest.open("GET", baseURL + "SignImage/0", true );
      httpRequest.responseType = "blob"; 
      httpRequest.onload = function (){
        let image = new Image();      
        image.src = createBlobURL(httpRequest.response);        
        image.onload = function (){           
           Context.drawImage(image, 0, 0);
           revokeBlobUrl( image.src );
           image = null;
        }
     }   
     httpRequest.send(null);
 }

End all occurrences of XMLHttpRequest

Answer №1

Answer №2

Answer №3

Similar questions

When choosing the child option, it starts acting abnormally if the parent option is already selected in Angular

The JSON parsing functionality is not working as expected in my app.js file

Iterate through an Array of Objects and exhibit a single object property in HTML one at a time by utilizing Javascript

Traversing an object with a loop

Experiencing difficulties in transmitting multipart form data from React to Express Js accurately

what strategies can be implemented to prioritize addressing validation errors in return forms

XMLHttpRequest problem: receiving status code 0 from both local and live server

What is the preset value for the payload in a vuex action?

Press a button to activate a function on a dynamically created table using Ajax

Partially accessible Angular service within a callback function

What is the best way to trigger a modal to appear when dynamically generated items are clicked?

Is there a way to swap out values in a JavaScript Object for new ones?

Unusual shadow cast by the box's silhouette

Having trouble accessing the ID of a list item using jQuery?

history.push() function is ineffective within a JavaScript file that does not contain a class

Serve static files using ExpressJS when a post request is made

Using Javascript, when the command key is pressed, open the link in a new window

Texture mapping in THREE.JS can be applied to ExtrudeGeometry for enhancing the appearance

How to use multiple template urls in Angular 6

The setInterval function is active in various components within Angular 6