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

Question

问题

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

但是，假设有一个聊天室，其中有聊天者 A、B 和 C。如果 A 开始打字，然后 B 也开始打字，A 的超时将被清除，并且永远不会消失。

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

代码

index.js

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

    socket.on('csTyping', function(user){
        socket.broadcast.emit('scTyping', user);
    });
});

chat.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 秒(或无论如何旧)，那么您可以执行您想要的代码。