feat(input): 添加输入事件延迟触发

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)
     }
   }
 

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 事件                                                                                              |

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
 }

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)
+      }
+    }
+  }
+}