javascript - Promise 2 在 Promise 1 之前解决

Question

我正在文本字段中进行搜索，当我键入时，会在 100 毫秒后调用到后端。

例如，如果我们搜索“5041”并立即搜索“50”并再次将其设为“5041”，则对后端进行了 3 次调用。

1."5041" -> Promise 1

2."50"   -> Promise 2

3."5041" -> Promise 3

但是， promise 3(网络调用需要 200 毫秒)在 promise 2(网络调用需要 500 毫秒)之前解决，这使得屏幕反射(reflect) promise 2(“50”)的结果，而我在文本字段中只有“5041”。

我需要一些方法让用户在不阻塞用户的情况下在文本字段中键入内容，并能够仅显示最后一次调用的结果。

这可以在 Angular 应用程序中使用来自 rxjs 的 switchMap 来实现。但是，我需要一种方法在 vanilla JS 中实现相同的目的。

Answer 1

首先，您可以将fetchData 函数包装到类似fetchLatestSearchResults 的函数中，记录网络调用的时间 和返回所有网络调用的最新结果(无论从服务器返回什么数据)

const generateLatestSearchFetch = function(fetchFunc){
  let mostRecentResult = null;
  let mostRecentResultFetchTime = Date.now();

  return (...args) => {

    const myFetchStartTime = Date.now();

    return fetchFunc(...args)
      .then(data => {
        if (myFetchStartTime > mostRecentResultFetchTime) {
          mostRecentResult = data;
          mostRecentResultFetchTime = myFetchStartTime
        }
        return mostRecentResult;  
      });
  }
};

使用赞:

fetchData = generateLatestSearchFetch(fetchData);
fetchData('10'); // resolves first and returns result for 10
fetchData('102'); // resolves third and returns result for 1024
fetchData('1024'); // resolves second and returns result for 1024

最后但同样重要的是，使用debounce more on this优化每种类型事件的网络调用次数。