时间戳

首页 > 解决方案 > JS onclick，覆盖之前的点击

javascript - JS onclick，覆盖之前的点击

问题描述

我正在编写一个查询引擎，用户输入参数然后单击查询。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>

标签： javascriptangularjsdom-events

解决方案

您的代码已进入多线程，第一个线程已分配给您单击功能中的代码，第二个线程已分配给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);
      })
    }

然后在你的点击函数apicallFun中调用它：

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

推荐阅读