From aab47b080a3bb4d981714ff479c7ddbf256bdaf0 Mon Sep 17 00:00:00 2001
From: yuez <i@yuez.me>
Date: Sun, 24 May 2020 00:41:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(input):=20=E6=B7=BB=E5=8A=A0=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E4=BA=8B=E4=BB=B6=E5=BB=B6=E8=BF=9F=E8=A7=A6=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/input/index.js             | 13 +++++-
 .../src/components/input/index.md             |  1 +
 packages/taro-utils/src/index.js              |  7 +++-
 packages/taro-utils/src/timer.js              | 41 +++++++++++++++++++
 4 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 packages/taro-utils/src/timer.js

diff --git a/packages/taro-components/src/components/input/index.js b/packages/taro-components/src/components/input/index.js
index 6eda92ca20e9..4b103281faf8 100644
--- a/packages/taro-components/src/components/input/index.js
+++ b/packages/taro-components/src/components/input/index.js
@@ -2,6 +2,7 @@ import 'weui'
 import Nerv from 'nervjs'
 import omit from 'omit.js'
 import classNames from 'classnames'
+import { Timer } from '@tarojs/utils'
 
 import './index.scss'
 
@@ -35,6 +36,11 @@ class Input extends Nerv.Component {
     // input hook
     this.isOnComposition = false
     this.onInputExcuted = false
+
+    const onInputDelay = this.props.onInputDelay
+    if (onInputDelay && typeof onInputDelay === 'number' && this.onInputDelay > 0) {
+      this.timer = Timer.delay(onInputDelay)
+    }
   }
 
   componentDidMount () {
@@ -49,6 +55,9 @@ class Input extends Nerv.Component {
     if (this.props.type === 'file') {
       this.inputRef.removeEventListener('change', this.onInput)
     }
+    if (this.timer) {
+      this.timer.clear()
+    }
   }
 
   onInput (e) {
@@ -85,8 +94,8 @@ class Input extends Nerv.Component {
         )
       }
 
-      if (onChange) return onChange(e)
-      if (onInput) return onInput(e)
+      if (onChange) return this.timer ? this.timer.run(onChange, e) : onChange(e)
+      if (onInput) return this.timer ? this.timer.run(onInput, e) : onInput(e)
     }
   }
 
diff --git a/packages/taro-components/src/components/input/index.md b/packages/taro-components/src/components/input/index.md
index 67ecef5d8134..4ddb3462b6a9 100644
--- a/packages/taro-components/src/components/input/index.md
+++ b/packages/taro-components/src/components/input/index.md
@@ -24,3 +24,4 @@ input
 | √ (onFocus)  | bindfocus         | EventHandle |        | 输入框聚焦时触发，height 参数在基础库 1.9.90 起支持                                                             |
 | √ (onBlur)   | bindblur          | EventHandle |        | 输入框失去焦点时触发                                                                                            |
 |              | bindconfirm       | EventHandle |        | 点击完成按钮时触发                                                                                              |
+|              | on-input-delay       | Number |        | 当键盘输入时，指延迟指定时间后触发 input 事件                                                                                              |
\ No newline at end of file
diff --git a/packages/taro-utils/src/index.js b/packages/taro-utils/src/index.js
index 87c2a2bf6444..781ecce3e381 100644
--- a/packages/taro-utils/src/index.js
+++ b/packages/taro-utils/src/index.js
@@ -1,5 +1,6 @@
 import shallowEqual from './shallow-equal'
 import SimpleMap from './simple-map'
+import Timer from './timer'
 
 function addLeadingSlash (path) {
   return path.charAt(0) === '/' ? path : '/' + path
@@ -14,11 +15,13 @@ function getCurrentPageUrl () {
 export default {
   shallowEqual,
   getCurrentPageUrl,
-  SimpleMap
+  SimpleMap,
+  Timer
 }
 
 export {
   shallowEqual,
   getCurrentPageUrl,
-  SimpleMap
+  SimpleMap,
+  Timer
 }
diff --git a/packages/taro-utils/src/timer.js b/packages/taro-utils/src/timer.js
new file mode 100644
index 000000000000..488a902abb67
--- /dev/null
+++ b/packages/taro-utils/src/timer.js
@@ -0,0 +1,41 @@
+const TIMER_TIMEOUT = 1
+const TIMER_INTERVAL = 2
+
+export default class Timer {
+  constructor (type, ms) {
+    this.type = type
+    this.ms = ms
+    this.handler = null
+  }
+
+  static delay (ms) {
+    return new Timer(TIMER_TIMEOUT, ms)
+  }
+
+  static period (ms) {
+    return new Timer(TIMER_INTERVAL, ms)
+  }
+
+  run (fn, ...args) {
+    this.clear()
+
+    if (this.type === TIMER_TIMEOUT) {
+      this.handler = setTimeout(fn, this.ms, ...args)
+      return true
+    } else if (this.type === TIMER_INTERVAL) {
+      this.handler = setInterval(fn, this.ms, ...args)
+      return true
+    }
+    return false
+  }
+
+  clear () {
+    if (this.handler) {
+      if (this.type === TIMER_TIMEOUT) {
+        clearTimeout(this.handler)
+      } else if (this.type === TIMER_INTERVAL) {
+        clearInterval(this.handler)
+      }
+    }
+  }
+}