如何键入并停止在socket.io和jquery中正确输入?

时间:2016-01-31 22:23:52

标签: jquery node.js socket.io

我知道socket.io发布了聊天应用的来源,但是由于某种原因我无法理解所有组件。

我也读了一篇很棒的SO article,但仍然无法弄清楚如何正确地做到这一点。

这是我的尝试

客户机侧

function timeoutFunction() {
    typing = false;
    socket.emit("typing", false);
  }


  $('.typing-message').keyup(function() {
    console.log('happening');
    typing = true;
    socket.emit('typing', 'typing...');
    timeout = setTimeout(timeoutFunction, 2000);
  });


  socket.on('typing', function(data) {
    if (data) {
      $('.typing').html(data);
    } else {
      $('.typing').html("");
    }
  });

服务器侧

 socket.on('typing', function (data) {
      console.log(data);
      socket.broadcast.emit('typing', data);
    });

它确实有效,但它没有按照我想象的那样工作,问题出现在我打字更长时间状态$('.typing').html();在打字和持续之间不断变化。这种情况只有在我输入更长时间才会发生。

如何正确执行此功能。

谢谢。

1 个答案:

答案 0 :(得分:7)

keyup处理程序中,您需要在设置新的超时之前清除先前的超时:

var timeout;

function timeoutFunction() {
    typing = false;
    socket.emit("typing", false);
}

$('.typing-message').keyup(function() {
    console.log('happening');
    typing = true;
    socket.emit('typing', 'typing...');
    clearTimeout(timeout);
    timeout = setTimeout(timeoutFunction, 2000);
});

socket.on('typing', function(data) {
    if (data) {
        $('.typing').html(data);
    } else {
        $('.typing').html("");
    }
});