0

We are making an HTTP request based upon user input. So each time the user inputs a character, an HTTP request is kicked off. The issue we are having: the user will enter ABC and then enter ABCD. ABCD will respond before ABC. Thus, the displayed results do not match ABCD. They match ABC.

Below is our current solution. We are rejecting all promises that have not been resolved. This seems to me to be an anti-pattern. Is there an approach to this that will result in better performance, readability, or better functionality?

function cancelPreviousSearchRequest(previousSearchRequest) {
        if(previousSearchRequest) {
            previousSearchRequest._defer.resolve();
        }
    }

function getPVendors(typed, subTypes) {

    var pVendorsDefer = $q.defer();
    var pVendorsPromise = pVendorsDefer.promise;
    $http.get(SERVLET_CONTEXT + RestConstants.masterDataIntegrationSearchByPvendorName(typed, subTypes), {timeout: pVendorsPromise})
        .success(function(data){
            var result = _.get(data, '_embedded.paymentVendors', []);
            pVendorsDefer.resolve(result);
        })
        .error(function(data){
            if(data != null) {
                growl.error("Service error occurred while retrieving Payment Vendors");
           }
            pVendorsDefer.reject();
        });

    pVendorsPromise._defer = pVendorsDefer;
    return pVendorsPromise;
}

NOTES FROM COMMENTS:

We are doing a debounce already: ng-model-options="{ debounce: 150 }"

Chris Bolton
  • 2,162
  • 4
  • 36
  • 75
  • The most simple solution is to wrap the request with debouncing function with optimal delay, also good for performance. – Estus Flask Dec 08 '16 at 16:01
  • We would still have the problem with a debounce. It may happen less often but will still happen. Any other ideas? – Chris Bolton Dec 08 '16 at 16:06

0 Answers0