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>

的HomeController

(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

你决定延迟（或者＃34;去抖动，＃34;因为这种技术有时被称为）是明智的 - 如果你的应用程序上有足够的用户，每次击键发送一个ajax请求是一种有效的方法让您的服务器瘫痪（更不用说让您的客户端应用程序感觉非常迟钝）。

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

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

Answer 2

您可以尝试使用$ timeout，我认为这可以正常工作

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

Answer 3

您可以使用angular $ timeout或javascript native timeout也可以正常工作。我的例子将是本地的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 with validation和form submit，但我不会进入。

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

3 个答案: