An abstract DOM element observer class, subclasses of which can be used to periodically check a value and trigger a callback when the value has changed.

A TimedObserver object will try to check a value using the getValue() instance method which must be defined by the subclass. There are two out-of-the-box subclasses: Form.Observer, which serializes a form and triggers when the result has changed; and Form.Element.Observer, which triggers when the value of a given form field changes.

Using TimedObserver implementations is straightforward; simply instantiate them with appropriate arguments. For example:

new Form.Element.Observer(
  'myelement',
  0.2,  // 200 milliseconds
  function(el, value){
    alert('The form control has changed value to: ' + value)
  }
)

Now that we have instantiated an object, it will check the value of the form control every 0.2 seconds and alert us of any change. While it is useless to alert the user of his own input (like in the example), we could be doing something useful like updating a certain part of the UI or informing the application on server of stuff happening (over Ajax).

The callback function is always called with 2 arguments: the element given when the observer instance was made and the actual value that has changed and caused the callback to be triggered in the first place.

Creating Your Own TimedObserver Implementations

It's easy to create your own TimedObserver implementations: Simply subclass TimedObserver and provide the getValue() method. For example, this is the complete source code for Form.Element.Observer:

Form.Element.Observer = Class.create(Abstract.TimedObserver, {
  getValue: function() {
    return Form.Element.getValue(this.element);
  }
});