在做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个问题
-
throttle函数是如何防止重复点击的？ - 为什么第一种方式能work，第二种调用方式就不行了？
- 如何解决这个问题？
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。
