Search code examples
angularjsinternet-explorer-9debouncing

Debounce does not work in IE9


My website currently uses a debounce directive with AngularJS v1.2.8. The debounce is fine in FF and Chrome but the delay does not happen in IE9. I have a strict requirement to support IE9 and I cannot upgrade to a newer version of Angular. What part of this code is not IE9 compatible? Or if there is a debounce directive that is already known to work in IE9 that would be greatly appreciated.

Current debounce directive :

angular.module('stuff.debounce', []).directive('ngDebounce', function($timeout) {


    return {
        restrive: 'A',
        require: 'ngModel',
        priority: 99,
        link: function(scope, elm, attr, ngModelCtrl) {
            if(attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input');

            var debounce;

            elm.bind('input', function() {
               $timeout.cancel(debounce);
               debounce = $timeout( function () {
                  scope.$apply(function() {
                      ngModelCtrl.$setViewValue(elm.val());
                  }); 
               }, attr.ngDebounce || 1000);
            });
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });
            });
        }
    };
});

Solution

  • Tried some other debounce apis but none of them worked so I wrote a little javascript method that works in IE9 for debouncing.

    var deb = undefined;
    $scope.someMethod = function() {
        if(deb !== undefined)
             $timeout.cancel(deb);
        deb = $timeout( function() {
             //do stuff that you want debounced
            deb = undefined;
        }, 1500); //1500 is the debounce delay in ms
    };
    

    Sorry if this is messy I had to write it from my phone.