javascript - "right"处理迟到响应的方法是什么

Question

假设我们有两个按钮，每个按钮都调用以下方法:

var NUMBER_OF_IMAGE_REQUEST_RETRIES = 3;
var IMAGE_REQUEST_TIMEOUT = 3000;


processImage: function(image_data) {
    var main_response = $q.defer();
    var hash = getImageHash(image_data);

    var requestsCounter = -1;

    requestImage = function() {
      $http.post(apiUrl, {params: {data: hash},timeout: IMAGE_REQUEST_TIMEOUT})
       .then(function(response) {
           return main_response.resolve(response.data);
        }, function(error) {
        if (++requestsCounter < NUMBER_OF_IMAGE_REQUEST_RETRIES) {
          requestLabelsImage();
        } else {
          return main_response.reject();
        }
      });
    };

    requestLabelsImage();

    return main_response.promise;
}

该方法将图像相关数据传递给服务器，服务器处理数据然后响应。每次用户按下不同的按钮时，都会将不同的 image_data 发送到服务器。

问题:

用户按下按钮 1，使用 image_data_1 调用该方法，然后他/她立即按下按钮 2，并使用 image_data_2 调用该方法。 processImage 函数由另一种方法调用，比如说 doSomethingWithTheResponse ，它只关心最新的用户操作，但是 image_data_2 的处理速度更快服务器，因此客户端在 image_data_1 之前获取 image_data_2，因此客户端认为 image_data_1 与用户的最新操作有关，但事实并非如此。 我们如何确保客户端始终获得与用户最新操作相关的响应？

注意:不同 image_data 请求的哈希值不同。

我在想这样的事情:

var oldhash = null;

processImage: function(image_data) {
    var main_response = $q.defer();
    var hash = getImageHash(image_data);
    oldhash = hash;

    var requestsCounter = -1;

    requestImage = function(hash) {
     if(hash === oldhash){

      $http.post(apiUrl, {params: {data: hash},timeout: IMAGE_REQUEST_TIMEOUT})
       .then(function(response) {
           return main_response.resolve(response.data);
        }, function(error) {
        if (++requestsCounter < NUMBER_OF_IMAGE_REQUEST_RETRIES) {
          requestLabelsImage(hash);
        } else {
          return main_response.reject();
        }
      });

    }
    else {
      main_response.reject();
    }
   }

    requestLabelsImage(hash);

    return main_response.promise;
}

但我不能 100% 确定这是正确的方法。

Answer 1

直接忽略之前的请求。

您可以创建请求存储库(数组或字典实现都可以)。一旦发出另一个请求(当您将其添加到存储中时)，请对之前的请求调用 .abort()。

如果你想要一本字典，这里有一个很好的例子 here (虽然解决了不同的主题)，但这里是他的代码的修改片段，与您的案例相关:

var _pendingRequests = {};

function abortPendingRequests(key) {
    if (_pendingRequests[key]) {
        _pendingRequests[key].abort();
    }
}

key 可以是……比如说……您的操作的类别。您可以为其命名常量，也可以只是按下的按钮的名称。它甚至可以是您请求的 URL；完全取决于你。

这里对整个概念有很好的解释:

jquery abort() ajax request before sending another https://stackoverflow.com/a/3313022/594992