Is there a cost to repeating a $watch for the same variable?

I have some textAngular code where I watch a variable in the scope, multiple times? Is there a simple way to only create this watch once, or can I detect that it exists???

The section of code is:

 taRegisterTool('fontColor', {
    display: "<button colorpicker type='button' class='btn btn-default ng-scope'  title='Font Color'  colorpicker-close-on-select colorpicker-position='bottom' ng-model='fontColor' style='color: {{fontColor}}'><i class='fa fa-font '></i></button>",
    action: function (deferred) {
      var self = this;
      self.$watch('fontColor', function (newValue) {
        self.$editor().wrapSelection('foreColor', newValue);
      });
      self.$on('colorpicker-selected', function () {
        deferred.resolve();
      });
      self.$on('colorpicker-closed', function () {
        deferred.resolve();
      });
      return false;
    }
  });

Each time this button is clicked, this action is executed. This $watch causes multiple instances to be created and to live on.

Based on the helpful comment by 'npe' below, I have amended the code to keep the watch from being created multiple times.

New Code:

taRegisterTool('fontColor', {
        display: "<button colorpicker type='button' class='btn btn-default ng-scope'  title='Font Color'  colorpicker-close-on-select colorpicker-position='bottom' ng-model='fontColor' style='color: {{fontColor}}'><i class='fa fa-font '></i></button>",
        action: function (deferred) {
          var self = this;
          if (typeof self.listener == 'undefined') {
            self.listener = self.$watch('fontColor', function (newValue) {
              console.log(newValue);
              self.$editor().wrapSelection('foreColor', newValue);
            });
          }
          self.$on('colorpicker-selected', function () {
            deferred.resolve();
          });
          self.$on('colorpicker-closed', function () {
            deferred.resolve();
          });
          return false;
        }
      });

Thanks for your insight!

Answers


Based on the comments and suggested addition of a log message from https://stackoverflow.com/users/1344008/npe, it is clear that in this instance the watch is created multiple times which I understood, and by looking at the log output: It is clear that every watch is added and even if exactly the same variable is watched, one needs to keep track of the listener which is returned when it is added in order to remove it. This makes complete sense... I just wasn't thinking so clearly :-) So I amended the code to remove this inefficiency. Thanks to those that looked at this.


Need Your Help

How to keep the browser history in sync when using Ajax?

javascript asp.net ajax hashchange

I'm writing a simple photo album app using ASP.NET Ajax.

ios 5 and ios6 compatibility features -xcode

ios xcode release beta ios6-maps

I want to create a map based app but apple will no longer user google maps in ios 6.I dont want to upgrade to the developer beta yet as I am waiting for the final release. But I also want to get st...