CODEWITHSUNDEEP
javascriptangularjsdelay
user3987709
user3987709

Reputation:

how to daly send request after user stop typing using angularjs

I am trying to find away to delay send request to WebApi after user stop typing using Angularjs 500 or 800 millisecond right now my code will send what user type and query data. I am thinking to delay send request but I don't know how to do it 

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

}());

Home Service 

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

Upvotes: 2

Views: 1736

Answers (3)

mjswensen
mjswensen

Reputation: 3124

Your decision to delay (or "debounce," as this technique is sometimes called) is wise--if you get enough users on your application, sending an ajax request with each keystroke is an effective way to bring your server to its knees (not to mention possibly making your client application feel quite sluggish).

The trick is clearing the timeout when you receive another keystroke event. That way only when the user stops typing the timeout will have a chance to complete. Consider this example:

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

Upvotes: 5

Neta Meta
Neta Meta

Reputation: 4047

You can use angular $timeout or javascript native timeout either will work just fine. my example will be with native 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);
};

Other way is to use debounce with validation and form submit but i wont go into that.

Upvotes: 0

marjes
marjes

Reputation: 172

You can try with $timeout, i think this can work

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

Upvotes: 0

Related Questions