JS onclick，覆盖之前的点击答案

【问题标题】：JS onclick, override previous clickJS onclick，覆盖之前的点击
【发布时间】：2020-01-23 18:15:59
【问题描述】：

我正在编写一个查询引擎，用户在其中输入参数，然后单击查询。 ng-click 事件最多可能需要 7-10 秒，但页面 1 的呈现时间不到一秒。如果用户想在该时间结束之前重新提交新查询，则会有一点延迟，因为我相信原始函数调用仍在返回。

有没有办法突然停止任何以前的函数调用并只调用最近的函数调用？

下面是查询函数和来自 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>

【问题讨论】：

这能回答你的问题吗？ How to cancel an $http request in AngularJS?
@Taplar，我不希望基于超时取消。我想根据另一个点击事件取消。
timeout 没有文字超时。超时被延迟/承诺。您可以选择何时解决它。

标签： javascript angularjs dom-events

【解决方案1】：

您的代码已进入多线程，第一个线程已分配给单击函数内部的代码，第二个线程已分配给http get request。所以第一个线程被执行，因为它忽略了下一个线程执行。为此，在 javascript 中，我们有用于处理异步调用的回调函数。不使用setTimeout function，而是在回调中记录API调用响应。

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

然后在你的 click 函数中调用 apicallFun 为：

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

【讨论】：

您能否详细说明“在回调中记录 API 调用响应”的含义？
那太棒了

【解决方案2】：

也许你可以将整个事情包装在一个 do..while 循环中，并有一些退出变量可以设置为 true？

【讨论】：

这似乎更像是评论而不是答案。如果打算作为答案，请提供示例代码。