Отменить все экземпляры XMLHttpRequest

Question

У меня есть эта строка кода, которая вызывает функцию SigWebRefresh через определенные промежутки времени (50 миллисекунд).

tmr = setInterval(SigWebRefresh, 50); 

SigWebRefresh выполняет 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); 
} 

У меня было использовать clearInterval, что очищает таймер, установленный с помощью метода setInterval().

clearInterval(tmr);  

Я хочу, чтобы отменить все XMLHttpRequest, но xhr2.abort(); только прерывает один экземпляр запроса. Как прервать все незавершенные XmlHttpRequest?

Answer 1

Попробуйте толкая каждую xhr2 переменную массив, использовать Array.prototype.forEach прервать каждую xhr2 переменного хранящейся

var requests = []; 

function SigWebRefresh(){ 
    xhr2 = new XMLHttpRequest(); 
    requests.push(xhr2);  
    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); 
} 

// abort all requests 
requests.forEach(function(request) { 
    request.abort() 
}) 

Answer 2

Вы могли бы реализовать список всех запросов обработки:

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

var all_requests = [] // The list of requests that are processing 
function SigWebRefresh(){ 
    var 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; 
      remove(all_requests, xhr2); // Make sure to remove already finished requests from your list 
     } 
    } 
    xhr2.send(null); 
    all_requests.push(xhr2); // Add processing request to the list 
} 

А потом очистить :

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

Answer 3

var xhr2 = null; 

function SigWebRefresh(){ 
     if(xhr2 != null) { 
      xhr2.abort(); 
      xhr2 = null; 
     } 
     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); 
}