React Native 中的“用户正在打字”逻辑实现

Question

我试图在用户键入时显示一条消息，并在达到超时期限后隐藏该消息，我将此逻辑与React Native和 一起使用Gifted Chat。

     updateTyping() {
        var TYPING_TIMER_LENGTH= 1000;

        if (this.state.connected) {

            if (!this.state.typing) {
                this.setState({typing : true})
                console.log('typing')   
            }

            var lastTypingTime = (new Date()).getTime();

            setTimeout( () => {

                var typingTimer = (new Date()).getTime();
                var timeDiff = typingTimer - lastTypingTime;

                if (timeDiff >= TYPING_TIMER_LENGTH && this.state.typing) {
                console.log('Stop typing')
                this.setState({typing : false});
                }

            }, TYPING_TIMER_LENGTH);
        }
        else{
            console.log("Socket Cannot connect.")
        }
    }

现在，typing即使用户正在打字，消息也会不断隐藏和显示（闪烁）。

逻辑学

现在从逻辑上讲，该typing消息应该显示，如果 1000 毫秒空闲后，该typing消息将隐藏。

从我的代码片段来看，我是否有什么做得不对的地方？任何想法将不胜感激

Answer 1

这是我执行代码的实现，但效果更好（如评论中所述）。

        if (!this.state.typing) {
            this.setState({typing : true})
            console.log('typing')   
        } else {
            clearTimeout(timeoutVar);
        }

        //var lastTypingTime = (new Date()).getTime();

        timeoutVar = setTimeout( () => {
            //you dont need to do this. either do this and no timeout,
            //or do timeout and not this. It's virtually doing the same thing.
            //
            //var typingTimer = (new Date()).getTime();
            //var timeDiff = typingTimer - lastTypingTime;

            //if (timeDiff >= TYPING_TIMER_LENGTH && this.state.typing) {
            console.log('Stop typing')
            this.setState({typing : false});
            //}

        }, TYPING_TIMER_LENGTH);

唯一重要的事情是您需要确保它timeoutVar是在 updateTyping 之外的某个地方定义的，但可以访问。否则这行不通。它背后的想法是这样的：我们设置一个超时来做某事，它会在我们告诉它的时间触发TYPING_TIMER_LENGTH，但是每次我们输入一些东西（假设从你的代码中，这个函数在他们输入时被击中）我们清除超时所以它不会着火。它触发的唯一时间是如果我们不清除它，即他们停止输入（再次假设从您的代码中）。