如何在用户停止输入后使用 angularjs 发送请求

Question

我正在尝试在用户停止使用 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 HomeController = function($scope, homeService) {

        $scope.searchString = "";
        $scope.currentPage = 1;

        var getUsers = function(searchString) {
            if (searchString) {
                homeService.getUsers(searchString).then(function(data) {
                    $scope.users = data;
                }, function(errMsg) {
                    console.log(errMsg);
                });
            }
        } // /getUsers


    //search user                  
        $scope.search = function () {
            if ($scope.searchString.length >= 2) {
                getUsers($scope.searchString);
            }
        };// /search

    };// /HomeController


    app.controller('HomeController', ['$scope', 'HomeService', HomeController]);

}());

上门服务

(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]);
}());

Answer 1

你可以尝试使用 $timeout，我认为这可行

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

Answer 2

您可以使用 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 验证和表单提交，但我不会深入讨论。

Answer 3

您决定延迟（或 "debounce,"，因为这种技术有时被称为）是明智的——如果您的应用程序有足够的用户，则每次击键时发送一个 ajax 请求是有效的使您的服务器崩溃的方法（更不用说可能使您的客户端应用程序感觉非常缓慢）。

诀窍是在您收到另一个击键事件时清除超时。这样只有当用户停止输入超时时才有机会完成。考虑这个例子：

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

如何在用户停止输入后使用 angularjs 发送请求

how to daly send request after user stop typing using angularjs

javascript

delay

angularjs