如何在 JavaScript 中创建动态超时句柄？

Question

题

我正在使用为聊天室setTimeout()实现“用户正在键入”消息。超时存储在句柄中，以便可以在连续按键时清除超时并重置，以便超时真正代表用户完成输入的时间。

但是，假设有一个聊天室，里面有聊天者 A、B 和 C。如果 A 开始打字，那么 B 开始打字，A 的超时被清除并且永远不会消失。

那么，有没有一种方法可以动态创建超时句柄，以便无论聊天室中有多少用户或当前正在打字，我都只能清除相应的句柄？

代码

索引.js

io.on('connection', function(socket){

    socket.on('csTyping', function(user){

        socket.broadcast.emit('scTyping', user);

    });

});

聊天.js

var typingLock = false;

var tMsgTimeout = 1 * 1000;

var tLockTimeoutHandle = window.setTimeout(() => {

    typingLock = false;

}, tMsgTimeout);

window.clearTimeout(tLockTimeoutHandle);

var tMsgTimeoutHandle = window.setTimeout(() => {

    removeTypingMsg(0);

}, tMsgTimeout);

window.clearTimeout(tMsgTimeoutHandle);

message.addEventListener('keypress', function(){

    if (!typingLock) {

        socket.emit('csTyping', clientUsername);

        typingLock = true;

        window.clearTimeout(tLockTimeoutHandle);

        tLockTimeoutHandle = window.setTimeout(() => {

            typingLock = false;

        }, tMsgTimeout);

    }

});

socket.on('scTyping', function(user){

    feedback.innerHTML += "<p id='typing" + user + "'><em>" + user + " is typing a message...</em></p>";

    window.clearTimeout(tMsgTimeoutHandle);

    tMsgTimeoutHandle = window.setTimeout(() => {

        removeTypingMsg('typing' + user);

    }, tMsgTimeout);

});

Answer 1

将您的超时句柄存储在一个对象中，就像这样var timeouts = {};timeouts[clientUsername] = setTimeout(function(){}, 1000);然后你可以用这个清除超时：clearTimeout(timeouts[clientUsername]);虽然，而不是使用大量超时，我会推荐一种不同的方法：使用 setInterval 定期检查事件发生时的时间戳 - 如果时间戳超过 10 秒（或多旧），那么您可以执行您的代码想。