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消息，如果在1000ms空闲后，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的时候触发，但每次我们输入一些东西时（假设从你的代码中这个函数获得）当他们输入时命中）我们清除超时，因此它不会触发。唯一一次触发就是我们不清除它，如果他们停止输入（再次，从你的代码中假设）。

Answer 2

嗨，我不擅长反应，但据我所知。使用计时器确实是一个坏主意，直到或除非你的属性是精确的时间限制。索尔：尝试使用OnFocus显示消息，并在远离该文本框时隐藏它。

“用户正在键入”React Native中的逻辑实现

2 个答案: