Question

我正在创建一个聊天脚本，我需要每三秒运行一次代码，而有人正在打字。我可以使用setInterval轻松地每三秒运行一次代码，但是将setInterval放入我的keypress事件会导致它从每个按键开始，所以它永远不会运行直到它们停止输入。另一个问题是当他们停止输入时停止它。有什么想法吗？

$("#message").keypress(function(event){
    // Do stuff here every keypress

    // Every three seconds, while someone is typing do this:
    ws.send(JSON.stringify({"type": "typing", "from": {"id": client.self.id, "hash": client.self.hash}, "to": {"id": client.partner.id, "hash": client.partner.hash}}));
});

Answer 1

好的，听起来很酷。

嗯，为此，

你应该为你的间隔采取一个变量。
在按键上，检查该间隔是否存在，如果存在，请将其清除。
然后在同一个变量上设置间隔，以便在下一个按键时再次检查是否存在间隔，并且可以重复这些步骤

这是POC：

$(function(){
    var request;

    $("#message").keypress(function (event) {
        // First clear the interval if exists
        if(request){
            clearInterval(request);
        }

        // the set the interval in the same variable
        request = setInterval(function(){
            ws.send(JSON.stringify({"type": "typing", "from": {"id": client.self.id, "hash": client.self.hash}, "to": {"id": client.partner.id, "hash": client.partner.hash}}));
        }, 3000);
    });
});

祝你好运！快乐jQuerying !!

Answer 2

这段代码有点冗长，可能写得更好，但它可以解决问题。基本上，您希望在计时器运行时间隔执行代码，并且需要在每个按键上清除/设置该计时器。如果计时器熄灭，请停止一切：

http://jsfiddle.net/tvxH7/

var keypressTimer = null,
    someInterval = null,
    clearTimers,
    doStuffWhileKeypress;

clearTimers = function() {
    clearInterval(someInterval);
    someInterval = null;
    keypressTimer = null;
};

doStuffWhileKeypress = function() {
    console.log('doStuffWhileKeypress executed');
};

$('#message').on('keypress', function(e) {
    if(keypressTimer !== null) {
        clearTimeout(keypressTimer);
    }
    keypressTimer = setTimeout(clearTimers, 1500);
    if(someInterval === null) {
        someInterval = setInterval(doStuffWhileKeypress, 3000);
    }
});

Answer 3

你知道当有两件事发生时，有人停止了打字：

该字段失去焦点（因为用户选项卡/单击了），这当然很容易使用blur事件处理程序进行测试，或
x 毫秒没有发生任何关键事件，其中 x 相当主观，不同的打字速度和所有，但可能是500毫秒。您可以使用密钥处理程序中的setTimeout() 和 clearTimeout()对此进行测试。

所以，也许这样的事情对你有用：

var timeoutId,
    intervalId;

function stopMyInterval() {
    clearInterval(intervalId);
    intervalId = null;
}

$("#message").keypress(function(event){
    clearTimeout(timeoutId); // user is still typing, so cancel previous timeout

    if (!intervalId) {
        intervalId= setInterval(function() {
            ws.send(JSON.stringify({"type": "typing", "from": {"id": client.self.id, "hash": client.self.hash}, "to": {"id": client.partner.id, "hash": client.partner.hash}}));
        }, 3000);
    }

    timeoutId= setTimeout(stopMyInterval, 500);
    // try some different values here -----^^^ until it feels natural.
}).blur(stopMyInterval);

请注意，在调用clearInterval() / clearTimeout()之前，您确实不需要测试是否已设置间隔/超时（如果传递无效值，则不会检测函数对象）。

演示：http://jsfiddle.net/gQf4C/

在调用事件时每隔几秒运行一次代码

3 个答案: