Input trigger with delay function, wait if input value changes

Question

I'm building a angular directive, which on input value change runs a function, i want to wait 300ms before running this function, but if the value changes before the 300ms has gone, i need to reset the delay to 300ms. So only if value changes for 300ms then the function should run:

My code

(function() {
    'use strict';

    angular
    .module('address',[])
    .directive('address', ['Address', function (Address) {
      return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'partials/address.html',
        link: function (scope, elem, attrs) {
            var delay = "300";
            scope.$watch('searchparam', function(){
                if(!_.isUndefined(scope.searchparam) && scope.searchparam.length >= 3) {
                    // here i need some delay timer
                    Address.get(scope.searchparam).then(function(data){
                        console.log("data: ", data);
                        scope.addressList = data;
                    }, function(status){
                        console.log("status: ", status);
                        scope.errorHandler = status;
                    });
                }
            }); 
        }
      };
    }]);
})();

The address.get is an async service that returns addresses

possible duplicate of How to write a debounce service in AngularJS — dting
– dting, Commented May 29, 2015 at 12:58
didn't know it was called debouncing, but im trying to close — Simon Dragsbæk
– Simon Dragsbæk, Commented May 29, 2015 at 13:17

Community · Accepted Answer · 2017-05-23 11:51:09Z

1

What you want to do is look into debouncing. It's included in most JS libraries.. and is standard as of AngularJS 1.3

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered May 29, 2015 at 12:55

Alex McMillan

18.1k13 gold badges63 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrey Popov · Accepted Answer · 2015-05-29 12:58:15Z

0

You need something like:

var delay = "300"; // not needed, just pointing where to put the rest of the code :)
var timeout;
scope.$watch('searchparam', function(){
    if(!_.isUndefined(scope.searchparam) && scope.searchparam.length >= 3) {
        function getAddress() {
            // do you stuff - Address.get(...
        }
        if (timeout) // try to clear the timeout if it was previously set
            clearTimeout(getAddress);
        timeout = setTimeout(getAddress, 300); // reset timer

answered May 29, 2015 at 12:58

Andrey Popov

7,5404 gold badges45 silver badges60 bronze badges

2 Comments

Simon Dragsbæk Over a year ago

This runs the function anyway just with a delay

Andrey Popov Over a year ago

In the question: "but if the value changes before the 300ms has gone, i need to reset the delay to 300ms".. well that's what the code does :)

Collectives™ on Stack Overflow

Input trigger with delay function, wait if input value changes

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related