CODEWITHSUNDEEP
javascriptjquery
Benedict Lewis
Benedict Lewis

Reputation: 2813

Run code every few seconds while event is being called

I am creating a chat script, and I need to run some code once every three seconds, while someone is typing. I can easily run code every three seconds just with setInterval, but putting setInterval inside my keypress event causes it to start from the beginning every keypress so it never runs until they stop typing. The other problem is stopping it when they stop typing. Any ideas?

$("#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}}));
});

Upvotes: 0

Views: 144

Answers (3)

nnnnnn
nnnnnn

Reputation: 150070

You'll know that somebody has stopped typing when one of two things happens:

  1. The field loses focus (because the user tabbed/clicked out), which is of course easy to test for with a blur event handler, or
  2. No key events have occurred for x milliseconds, where x is fairly subjective what with different typing speeds and all, but could perhaps be something like 500ms. You can test for this using setTimeout() and clearTimeout() in your key handler.

So, perhaps something like this will work for you:

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);

Note that you don't really need to test whether an interval/timeout has been set before calling clearInterval()/clearTimeout() (neither function objects if you pass it an invalid value).

Demo: http://jsfiddle.net/gQf4C/

Upvotes: 1

matthewpavkov
matthewpavkov

Reputation: 2928

This code is a little verbose and it can probably be better written, but it'll do the trick. Basically, you want to execute code on an interval while a timer is running, and you need to clear/set that timer on each keypress. If the timer goes off, stop everything:

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);
    }
});

Upvotes: 1

Ashish Kumar
Ashish Kumar

Reputation: 3039

Ok, sounds cool.

Well, for this,

  • you should take a variable for your interval.
  • And on keypress, check if that interval exists or not, if exists, clear it.
  • And then set the interval on the same variable, so that on next keypress, it check again if the interval is existing or not, and can repeat the steps

here is the 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);
    });
});

Good luck!! Happy jQuerying!!

Upvotes: 1

Related Questions