Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/387.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在用户停止使用angularjs键入后延迟发送请求_Javascript_Angularjs_Delay - Fatal编程技术网

Javascript 如何在用户停止使用angularjs键入后延迟发送请求

Javascript 如何在用户停止使用angularjs键入后延迟发送请求,javascript,angularjs,delay,Javascript,Angularjs,Delay,在用户停止使用Angularjs 500或800毫秒输入后,我试图找到延迟向WebApi发送请求的方法。现在,我的代码将发送用户类型和查询数据。我想推迟发送请求,但我不知道怎么做 <label for="exampleInputEmail1">search</label> <input type="search" class="form-control user-search" data-ng-mode

在用户停止使用Angularjs 500或800毫秒输入后,我试图找到延迟向WebApi发送请求的方法。现在,我的代码将发送用户类型和查询数据。我想推迟发送请求,但我不知道怎么做

                <label for="exampleInputEmail1">search</label>
                <input type="search" class="form-control user-search" data-ng-model="searchString" ng-keyup="search()" placeholder="Enter search here">
<div class="row">
    <div ng-repeat="user in users" class="col-xs-6 col-lg-4">
        <div>
            <h3>{{user.FName +' '+ user.LName }}</h3>
            <p>{{user.Title}}</p>

        </div>
家庭服务

(function () {
    'use strict';

    var app = angular.module('finduser');

    var HomeService = function ($http) {

        var getUsers = function (search) {
            var str = search.replace('.', '~');
            var uri = 'api/values?value=' + encodeURIComponent(str);

            return $http.get(uri).then(function (response) {
                return response.data;
            });
        };

        return {
            getUsers: getUsers
        };
    };

    app.factory('HomeService', ['$http', HomeService]);
}());

你可以试试$timeout,我想这可以用

  return $timeout(function() {$http.get(uri).then(function (response) {
                return response.data;
            });},800);// delay 800 ms

您可以使用angular$timeout或javascript本机超时,两者都可以正常工作。 我的示例将使用原生js

$scope.search = function () {
    clearTimeout($scope.timeout); // you any previously set Timeouts
    $scope.timeout = setTimeout(function(){ // start a new timeout
        if ($scope.searchString.length >= 2) { // do whatever you need.
            getUsers($scope.searchString);
        }
        clearTimeout($scope.timeout);// clear time out just in case.
    },800);
};
另一种方法是在验证和表单提交中使用debounce,但我不打算详细说明。

您延迟(或有时称为“debounce”)的决定是明智的——如果您的应用程序中有足够的用户,那么每次击键都发送ajax请求是让服务器屈服的有效方法(更不用说可能会让您的客户端应用程序感觉非常缓慢)

技巧是在接收另一个击键事件时清除超时。只有当用户停止键入时,超时才会有机会完成。请考虑这个例子:

var timeoutPromise;
$scope.search = function() {
  $timeout.cancel(timeoutPromise);
  timeoutPromise = $timeout(function() {
    // Make your API request here...
  }, 800);
};

你想实现什么?你想在用户停止输入后只发送x毫秒的请求吗?是的,这就是我想要的
var timeoutPromise;
$scope.search = function() {
  $timeout.cancel(timeoutPromise);
  timeoutPromise = $timeout(function() {
    // Make your API request here...
  }, 800);
};