承诺2在承诺1之前解决

Question

I am doing a search in the textfield and as I type, there is a call going to the backend after say 100ms.

For example, if we search "5041" and immediately search for "50" and again make it "5041", then there are 3 calls made to the backend.

1."5041" -> Promise 1

2."50"   -> Promise 2

3."5041" -> Promise 3

However, promise 3 (web call takes 200ms) resolves before promise 2 (web call takes 500ms) which makes the screen reflect results for promise 2 ("50") when all I have in the textfield is "5041".

I need some way to let user type in the textfield without blocking the user along with the ability to show results for only the last call.

This is something that can be achieved using switchMap from rxjs in an angular app. However I need a way to achieve the same in vanilla JS.

Answer 1

First you can wrap your fetchData function into a something like fetchLatestSearchResults function which notes the time when network call was made and return the latest result from all the network calls (irrespective of what data was returned from server)

 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; }); } }; 

Use Like :

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

Last but not the least, use debounce more on this to optimize number of network calls made for every type event.

Answer 2

You need a "last" function:

// takes a function returning a promise and only reports the last resort
function last(fn) { 
  let p;
  return function(...args) {
    let current = fn(); // call the function
    p = current; // mark it as the last call
    return p.then(result => { 
      // ask am I still the last call?
      if (p === current) return result;
      else return new Promise(() => {}); // never resolve
    });
  }
}

let onlyLastSearch = last((name) => fetch('/api?name=' + name));

onlyLastSearch('a'); // will be ignored
onlyLastSearch('b'); // will be ignored
onlyLastSearch('c'); // only relevant result

Answer 3

You can use observer pattern for this.

const createWrapper = (fn) => {
    let counter = 0;
    let lastFetchId = 0;
    const listeners = [];
    return {
        fetch: (str) => {
            let id = ++counter;
            fn(str).then((data) => {
                if(id > lastFetchId) {
                    listeners.forEach(fn => {
                        fn(data);
                    });
                    lastFetchId = id;
                }
            });
        },
        listen: (fn) => {
            listeners.push(fn);
            return () => {
                const index = listeners.indexOf(fn);
                listeners.splice(index, 1);
            };
        }
    }
}

const SearchWrapper = createWrapper(fetchData);

SearchWrapper.fetch('a');
SearchWrapper.fetch('b');
SearchWrapper.fetch('c');

SearchWrapper.listen((data) => {
    console.log(data);
})