ajax - "User is typing"聊天功能

Question

我正在尝试在聊天中添加“用户正在输入”功能；用 PHP + MySQL/Ajax 编写的聊天。

它应该如何工作:

- 当我的聊天伙伴 X 开始打字时，我在聊天框中看到:“X 正在打字”

- 当我(名为 Y)正在打字时，他会在他的聊天框中看到:“Y 正在打字”(就像 Yahoo Messenger 一样)。

到目前为止我尝试过的代码:

<script type="text/javascript" language="javascript">
    var timer = 0;

    function reduceTimer() {
        timer = timer - 1;
        isTyping(true);
    }

    function isTyping(val) {
        if (val == 'true') {
            document.getElementById('typing_on').innerHTML = "User is typing...";
        } else {

            if (timer <= 0) {
                document.getElementById('typing_on').innerHTML = "No one is typing -blank space.";
            } else {
                setTimeout("reduceTimer();", 500);
            }
        }
    }
</script>

<label>
    <textarea onkeypress="isTyping('true'); timer=5;" onkeyup="isTyping('false')" name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
<div id="typing_on">No one is typing -blank speace.</div>

问题:

如果我停下来思考一下我的拼写，看起来我已经停止打字了。是否有更相关且更简单的方法来设置此功能？是否有可能的代码:

文本框不为空(用户按下任意键开始输入)-> 消息:用户正在输入。

文本框为空 -> 消息:用户没有输入。

文本框不为空，但用户没有按任何键超过 5 秒 -> 消息:用户没有输入。

它向我自己表明我正在打字；我该如何实现它或在哪里实现它，以便在我的聊天框中看到“X 用户正在输入”而不是“我自己正在输入”。其他用户也一样，他应该收到关于我正在打字/不打字的消息，而不是关于他自己的消息。

谢谢你。

Answer 1

有一个漂亮的库插件，叫做 underscore.js

在其众多有用的功能中，有一个叫做 _.debounce。 ，可以像这样用来跟踪打字:

var typing, typingStarted, typingStopped;

typing = false;

typingStopped = _.debounce((function() {
  if (!typing) {
    return;
  }
  typing = false;
  console.log('typing is done so do what ever you need to do to notify it');
}), 5000);

typingStarted = function() {
  if (this.typing) {
    return;
  }
  typing = true;
  console.log('typing has started so do what ever you need to do to notify it');
};

document.querySelector("textarea").oninput = function(event) {
  typingStarted();
  typingStopped();
  return
};

其工作方式是在输入文本区域时调用 typingStarted 并将 typing 设置为 true 以防止再次调用它。
然后调用 typingStopped，但只会在 5000 毫秒后调用包装在 _.debounce 中的函数，该函数作为 _.debounce 的第二个参数给出。但是，如果您再次调用 typingStopped，它会将倒计时重置回原来的 5000 毫秒。由于在每个输入上都调用了 typingStopped，因此它只会在两次按键之间的整整 5 秒后执行 typing = false 。