JS onclick, override previous click

Question

I am writing a query engine where the user enters parameters and then clicks query. The ng-click event can take up to 7-10 seconds, but rendering of page 1 takes less than a second. If a user wants to re-submit a new query before that time is up there is a bit of a lag because I believe the original function call is still returning.

Is there a way to abruptly stop any previous function calls and only call the most recent?

Below is the query function and the call from the HTML

$scope.query = function(name, matchMode, domain) {
        name = name.trim();
        $scope.pageNumber = 0;
        start = 0
        end = $scope.perPage;
        $http.get(ROOT_API+"query/asset/"+name+"/"+matchMode+"/"+domain).success(
            function(data){
                $scope.results=data;
                $scope.displayResults=$scope.results.slice(start,end);
                $scope.totalResults=data.length;
                $scope.totalPages=Math.floor($scope.totalResults / $scope.perPage);
                setPageValues($scope.displayResults)
            });

        setTimeout(function() {
            $scope.displayResults.concat(setPageValues($scope.results.slice(end,$scope.totalResults)))
        },2000);

    }

<input ng-model="queryName" placeholder="name">
<input ng-model="matchMode" placeholder="match mode" defaultValue="ANYWHERE">
<input ng-model="domain" placeholder="domain" defaultValue="ANY">
<button ng-click="query(queryName, matchMode, domain)">QUERY</button>

Does this answer your question? [How to cancel an $http request in AngularJS?](https://stackoverflow.com/questions/13928057/how-to-cancel-an-http-request-in-angularjs) — Taplar, Jan 23 '20 at 18:28
@Taplar, I am not looking to cancel based on a timeout. I want to cancel based on another click event. — 0TTT0, Jan 23 '20 at 18:31
`timeout` there is not a literal timeout. Timeout is given a deferred/promise. It is up to you to choose when to resolve it. — Taplar, Jan 23 '20 at 18:33

Sunny · Answer 1 · 2020-01-23T19:19:06.090

Your code has gone in multiple threading, first thread has been assigned to code inside you click function from where it has been started and the second one assigned to http get request. so first thread gets executed as it ignores next thread execution. For that sake in javascript, we have callback functions for handling the async calls. instead of using setTimeout function, record the API call response in callback.

    let apicallFun = function(requestObj, Callback){
       console.log("Inside API call");
       return $http.get('/your_URL', requestObj)
      .then(function(response){
         Callback(response);
      })
    }

and then inside your click function call this apicallFun as:

$scope.clickFun = function(requestObj){
    apicallFun(requestObj, function(response){
       //according to your response object write the rest of your code.
    }
}

Can you please expand on what you mean by "record the API call response in callback"? — 0TTT0, Jan 23 '20 at 18:52

score -2 · Answer 2 · answered Jan 23 '20 at 18:19

-2

Maybe you could wrap the whole thing in a do..while loop and have some exit variable you can set to true?

answered Jan 23 '20 at 18:19

Sloan Tash

36
4

This seems more like a comment than an answer. If it's intended to be an answer, please provide example code. – isherwood Jan 23 '20 at 18:20

JS onclick, override previous click

2 Answers2