feat(range): add debounce input for ionChange event

Closes #6894

src/components/range/range.ts

@@ -5,6 +5,7 @@ import {Form} from '../../util/form';
 import {isTrueProperty, isNumber, isString, isPresent, clamp} from '../../util/util';
 import {Item} from '../item/item';
 import {pointerCoord, Coordinates, raf} from '../../util/dom';
+import {Debouncer} from '../../util/debouncer';
 
 
 const RANGE_VALUE_ACCESSOR = new Provider(
@@ -214,6 +215,7 @@ export class Range {
   private _snaps: boolean = false;
   private _removes: Function[] = [];
   private _mouseRemove: Function;
+  private _debouncer: Debouncer = new Debouncer(0);
 
   /**
    * @private
@@ -293,6 +295,17 @@ export class Range {
     this._pin = isTrueProperty(val);
   }
 
+  /**
+   * @input {number} If true, a pin with integer value is shown when the knob is pressed. Defaults to `false`.
+   */
+  @Input()
+  get debounce(): number {
+    return this._debouncer.wait;
+  }
+  set debounce(val: number) {
+    this._debouncer.wait = val;
+  }
+
   /**
    * @input {boolean} Show two knobs. Defaults to `false`.
    */
@@ -519,9 +532,10 @@ export class Range {
           this.value = newVal;
         }
 
+        this._debouncer.debounce(() => {
           this.onChange(this.value);
-
           this.ionChange.emit(this);
+        });
       }
 
       this.updateBar();

src/components/range/test/basic/page1.html

@@ -19,7 +19,7 @@
 
   <ion-list>
     <ion-item>
-      <ion-range [(ngModel)]="singleValue" danger pin="true" (ionChange)="rangeChange($event)"></ion-range>
+      <ion-range [(ngModel)]="singleValue" danger pin="true" (ionChange)="rangeChange($event)" [debounce]="100"></ion-range>
     </ion-item>
 
     <ion-item>

src/components/searchbar/searchbar.ts

@@ -3,6 +3,7 @@ import {NgControl} from '@angular/common';
 
 import {Config} from '../../config/config';
 import {isPresent} from '../../util/util';
+import {Debouncer} from '../../util/debouncer';
 
 
 /**
@@ -46,10 +47,10 @@ import {isPresent} from '../../util/util';
 })
 export class Searchbar {
   private _value: string|number = '';
-  private _tmr: any;
   private _shouldBlur: boolean = true;
   private _isActive: boolean = false;
   private _searchbarInput: ElementRef;
+  private _debouncer: Debouncer = new Debouncer(250);
 
   /**
    * @input {string} Set the the cancel button text. Default: `"Cancel"`.
@@ -64,7 +65,13 @@ export class Searchbar {
   /**
    * @input {number} How long, in milliseconds, to wait to trigger the `input` event after each keystroke. Default `250`.
    */
-  @Input() debounce: number = 250;
+  @Input()
+  get debounce(): number {
+    return this._debouncer.wait;
+  }
+  set debounce(val: number) {
+    this._debouncer.wait = val;
+  }
 
   /**
    * @input {string} Set the input's placeholder. Default `"Search"`.
@@ -268,13 +275,11 @@ export class Searchbar {
    */
   inputChanged(ev: any) {
     let value = ev.target.value;
-
-    clearTimeout(this._tmr);
-    this._tmr = setTimeout(() => {
+    this._debouncer.debounce(() => {
       this._value = value;
       this.onChange(this._value);
       this.ionInput.emit(ev);
-    }, Math.round(this.debounce));
+    });
   }
 
   /**

src/util/debouncer.ts

@@ -0,0 +1,25 @@
+
+export class Debouncer {
+  private timer: number = null;
+  callback: Function;
+
+  constructor(public wait: number) { }
+
+  debounce(callback: Function) {
+    this.callback = callback;
+    this.schedule();
+  }
+
+  schedule() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    if (this.wait <= 0) {
+      this.callback();
+    } else {
+      this.timer = setTimeout(this.callback, this.wait);
+    }
+  }
+
+}