Javascript 如何实施"；用户正在键入；功能和发送到服务器

我有这段代码，它可以检测用户是否在基于。我希望通过将ajax代码放在if/else语句中的某个位置，通过ajax将响应发送到服务器，但不确定如何发送

var textarea = $('#textarea');
var typingStatus = $('#typing_on');
var lastTypedTime = new Date(0); // it's 01/01/1970, actually some time in the past
var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message

function refreshTypingStatus() {
  if (!textarea.is(':focus') ||
      textarea.val() == '' ||
      new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
    typingStatus.html('No one is typing -blank space.');
  } else {
    typingStatus.html('User is typing...');
  }
}
function updateLastTypedTime() {
  lastTypedTime = new Date();
}

setInterval(refreshTypingStatus, 100);
textarea.keypress(updateLastTypedTime);
textarea.blur(refreshTypingStatus);

到目前为止，我所尝试的：

var textarea = $('#chatbox');
var typingStatus = $('#typing_on');
var lastTypedTime = new Date(0); // it's 01/01/1970, actually some time in the past
var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message

function refreshTypingStatus() {
  if (!textarea.is(':focus') ||
      textarea.val() == '' ||
      new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
    typingStatus.html('No one is typing -blank space.');
  } else {
    typingStatus.html('User is typing...');
    $.ajax({
      type: "POST",
      url: "usertypes.php?v=<?php echo $usarr; ?>",
    });
  }
}

function updateLastTypedTime() {
  lastTypedTime = new Date();
}

setInterval(refreshTypingStatus, 100);
textarea.keypress(updateLastTypedTime);
textarea.blur(refreshTypingStatus);

var textarea=$（“#聊天室”）；
var typingStatus=$（“#typing_on”）；
var lastTypedTime=新日期（0）；//现在是1970年1月1日，实际上是过去的某个时候
变量类型DelayMillis=5000；//在显示“没有人在打字-空白”消息之前，用户可以“思考他的拼写”多长时间
函数refreshTypingStatus（）{
如果（！textarea.is（'：focus'）||
textarea.val（）||
新日期（）.getTime（）-lastTypedTime.getTime（）>typingDelayMillis）{
typingStatus.html（'没有人在键入-空白'）；
}否则{
html（'用户正在键入…'）；
$.ajax({
类型：“POST”，
url:“usertypes.php？v=”，
});
}
}
函数updateLastTypedTime（）{
lastTypedTime=新日期（）；
}
设置间隔（refreshTypingStatus，100）；
textarea.keypress（updateLastTypedTime）；
textarea.blur（刷新输入状态）；

---

然而，我的似乎没有任何回应。所以我不确定ajax代码的位置是否正确。谁能解释一下我哪里出错了吗？

请再次检查：

$(document).ready(function() {
    console.log("ready!");
    var typing = false;
    var timeout = undefined;
    var typingDelayMillis = 1000;

    function timeoutFunction() {
        typing = false;
        $.ajax({
            type: "POST",
            url: "usertypes.php?v=<?php echo $usarr; ?>&isTyping="+typing,
        });
        $('#typing_on').html("");
    }
    var delay = (function() {
        var timer = 0;
        return function(callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();

    $('#chatbox').keypress(function(e) {
        if (typing === false && $("#chatbox").is(":focus")) {
            delay(function() {
                timeoutFunction();
            }, typingDelayMillis);
            typing = true;
            $.ajax({
              type: "POST",
              url: "usertypes.php?v=<?php echo $usarr; ?>&isTyping="+typing,
            });
            $('#typing_on').html("user types...");
        }
    });

    $('#chatbox').on("blur", function() {
        clearTimeout(timeout);
        timeout = setTimeout(timeoutFunction, typingDelayMillis);
    })
});

$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
var类型=false；
var超时=未定义；
var typingDelayMillis=1000；
函数timeoutFunction（）{
打字=假；
$.ajax({
类型：“POST”，
url:“usertypes.php？v=&isTyping=“+typing，
});
$（'#在'）.html（“”）上键入_；
}
变量延迟=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();
$（“#聊天室”）。按键（功能（e）{
如果（键入===false&&$（“#聊天盒”）是（“：焦点”））{
延迟（函数（）{
timeoutFunction（）；
}，输入延迟毫秒）；
输入=真；
$.ajax({
类型：“POST”，
url:“usertypes.php？v=&isTyping=“+typing，
});
$（'#键入''u on'）.html（“用户类型…”）；
}
});
$（'#chatbox'）。在（“模糊”，函数（）上）{
clearTimeout（超时）；
超时=设置超时（timeoutFunction，输入DelayMillis）；
})
});

在线演示：

---

将ajax代码放在按键事件上
在您的情况下，您应该在updateLastTypedTime函数中使用ajax代码，而不是在setInterval的回调中编写它，该回调在1秒内执行10次

<script>
    var textarea = $('#chatbox');
    var typingStatus = $('#typing_on');
    var lastTypedTime = new Date(0); // it's 01/01/1970, actually some time in the past
    var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message

    function refreshTypingStatus() {

      if (!textarea.is(':focus') ||
          textarea.val() == '' ||
          new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
        typingStatus.html('No one is typing -blank space.');
      } else {
        typingStatus.html('User is typing...');



      }
    }

    function updateLastTypedTime() {
      lastTypedTime = new Date();

      $.ajax({
          type: "POST",
          data: {var: 'value'},
          url: "usertypes.php",
          dataType: 'json',
          success: function(response) {
            console.log(response);
          },
          error: function(jqXHR, textStatus, errorThrown) {
              // if error , code here.. 
          }
        });
    }

    setInterval(refreshTypingStatus, 100);
    textarea.keypress(updateLastTypedTime);
    textarea.blur(refreshTypingStatus);

</script>

var textarea=$（“#聊天室”）；
var typingStatus=$（“#typing_on”）；
var lastTypedTime=新日期（0）；//现在是1970年1月1日，实际上是过去的某个时候
变量类型DelayMillis=5000；//在显示“没有人在打字-空白”消息之前，用户可以“思考他的拼写”多长时间
函数refreshTypingStatus（）{
如果（！textarea.is（'：focus'）||
textarea.val（）||
新日期（）.getTime（）-lastTypedTime.getTime（）>typingDelayMillis）{
typingStatus.html（'没有人在键入-空白'）；
}否则{
html（'用户正在键入…'）；
}
}
函数updateLastTypedTime（）{
lastTypedTime=新日期（）；
$.ajax({
类型：“POST”，
数据：{var:'value'}，
url:“usertypes.php”，
数据类型：“json”，
成功：功能（响应）{
控制台日志（响应）；
},
错误：函数（jqXHR、textStatus、errorshown）{
//如果出现错误，请在此处输入代码。。
}
});
}
设置间隔（refreshTypingStatus，100）；
textarea.keypress（updateLastTypedTime）；
textarea.blur（刷新输入状态）；

我已经测试了您的代码，但它好像没有检测到用户是否正在键入。您有没有任何示例我尝试过我的代码工作。我对PHP代码有一个问题。很抱歉给您带来不便