在做React Native項目時，需要對按鈕多次點擊問題進行處理。雖然是一個小功能，本著不重復造輪子的精神，就從其他較成熟的項目里借鑒了一個方案，沒想到就遇到一個坑。

這是個封裝的Touchable組件，可以防止按鈕多次點擊：

import React ,{ Component } from 'react'
import {View, TouchableOpacity} from 'react-native'
import * as _ from 'lodash'
export class Touchable extends Component {
  render() {
    return (
        <TouchableOpacity
          onPress={this.debouncePress(this.props.onPress)}>
          {this.props.children}
        </TouchableOpacity>
    )
  }
  debouncePress = onPress => {
    return _.throttle(onPress, debounceMillisecond, {leading: true, trailing: false})
  }
}

看上去挺高級的，還用上了lodash的throttle函數。
測一下

export default class AwesomeProject extends Component {
  render() {
    return (
        <Touchable
          onPress={()=>{
             console.log(`Button clicked!!,time:${Date.now()}`)
           }}
        >
          <Text>Click to test double click!</Text>
        </Touchable>
    );
  }
}

很好，能work。

然后試著換一種調用方式

export default class AwesomeProject extends Component {
  state={
    clickCount:0,
  }

  render() {
    return (
        <Touchable
          onPress={()=>{
             this.setState({
               clickCount:this.state.clickCount+1
             })
             console.log(`Button clicked!!,time:${Date.now()}`)
           }}
        >
          <Text>Click to test double click!</Text>
        </Touchable>
    );
  }
}

然后防止重復點擊就失效了！由于實際應用場景非常復雜，找了很久，這里只是發現原因后精簡的例子。

那么問題來了，有3個問題

1. throttle函數是如何防止重復點擊的？
2. 為什么第一種方式能work，第二種調用方式就不行了？
3. 如何解決這個問題？

1.throttle函數是如何防止重復點擊的？
throttle函數源碼如下

    function throttle(func, wait, options) {
      var leading = true,
          trailing = true;

      if (typeof func != 'function') {
        throw new TypeError(FUNC_ERROR_TEXT);
      }
      if (isObject(options)) {
        leading = 'leading' in options ? !!options.leading : leading;
        trailing = 'trailing' in options ? !!options.trailing : trailing;
      }
      return debounce(func, wait, {
        'leading': leading,
        'maxWait': wait,
        'trailing': trailing
      });
    }

核心是利用了debounce函數，debounce太長了，貼一下主要步驟

 function debounce(func, wait, options) {
      var lastArgs,
          lastThis,
          maxWait,
          result,
          timerId,
          lastCallTime,
          lastInvokeTime = 0,
          leading = false,
          maxing = false,
          trailing = true;
    ......
    function debounced() {
        var time = now(),
            isInvoking = shouldInvoke(time);

        lastArgs = arguments;
        lastThis = this;
        lastCallTime = time;

        if (isInvoking) {
          if (timerId === undefined) {
            return leadingEdge(lastCallTime);
          }
          if (maxing) {
            // Handle invocations in a tight loop.
            timerId = setTimeout(timerExpired, wait);
            return invokeFunc(lastCallTime);
          }
        }
        if (timerId === undefined) {
          timerId = setTimeout(timerExpired, wait);
        }
        return result;
      }
      debounced.cancel = cancel;
      debounced.flush = flush;
      return debounced;
    }

大致思路不難理解，利用了函數閉包，保存了最后一次lastCallTime等很多狀態。每次調用時，檢查上一次calltime及當前的狀態來決定是否call。可以設置很多復雜的選項，leading: true, trailing: false 的意思是，在debounce時間內，保留第一次call，忽略最后一次call，debounce時間中間的call也都忽略。lodash的實現沒問題，可以實現防止重復點擊。

2. 為什么第一種方式能work，第二種調用方式就不行了？
其實防止重復點擊的實現并不復雜，簡單來說，就是保存上次一次點擊時間，下次點擊時判斷時間間隔是否大于debounceTime 就行了。那么，這個上一次點擊時間lastClickTime保存在哪里呢？這就是問題所在。throttle利用js閉包的特性，將lastClickTime 保存在自己內部。例如let fpress=_.throttle(...)，fpress作為封裝后的onPress, 只要一直在引用，lastClickTime也能生效。

但是，如果我們在onPress函數里增加了setState邏輯，這導致觸發Component重新render. 在render時，會重新調用let fpress=_.throttle(...)。這時新生成的fpress就不是上次的fpress,lastClickTime保存在上一個fpress引用里，根本不能生效!

3. 如何解決這個問題
知道了原因就很好解決。只要將lastClickTime保存在合適的位置，確保重新render時也不會丟失。修改Touchable的debouncePress如下

  debouncePress = onPress => () => {
     const clickTime = Date.now()
     if (!this.lastClickTime ||
        Math.abs(this.lastClickTime - clickTime) > debounceMillisecond) {
        this.lastClickTime = clickTime
        onPress()
     }
  }

將lastClickTime保存在this的屬性里。觸發render后，React會對組件進行diff，對于同一個組件不會再次創建，lastClickTime可以存下來。
另外，網上有的防止重復點擊的方法是將lastClickTime保存在state里，由于setState會觸發render，感覺多此一舉。有的還利用了setTimeout，覺得對于簡單的場景也沒必要使用setTimeout。