hold ajax calls -> need logic assist!

[UnknownUser]

hey guys,
i working on a chat system and i have it so that if you start typing a msg it will say "the username is typing a msg.."
and how i do this is check with keydown command with javascript and run the a ajax call for php code, but the problem
i'm having is that it's printing out the msg 1000 times over and over when u press even one button and i need to implement
a control to handle the events, the way i could do it is to check if it's true that the user is typing and "remember it" and then
delete from memory sort of when user stop typing so that way it won't call for a new output every time cause it will know
if your still typing and it's holding the true value.

So what i ask for is help with building the control for the event just point me in the right direction.

Thanks guys!

[Jackolantern]

Probably the easiest way is to just set up each client with a sort of on/off mechanism. So every client has a flag, which would be a variable called something like "typingNoticeSent". When the user is typing, right in the key stroke event handler, the first thing you do is check that flag. If it is set to false, you send an AJAX call to the server to notify the other user to display the "<blank> user is typing..." notice. But in that part of the IF statement you also set the typingNoticeSent flag to true. That way on the next keystroke, when the event handler is called again, it will immediately fail the IF statement check because typingNoticeSent will be set to true and no AJAX call will be repeated. Also, for both of the separate results from the IF statement, you will also need to cancel the timer, which we will discuss next.

Then, to handle turning off the notice on the other user's end, you set up a separate event handler for the "key up" event. Maybe about a 3 second delay would be good, and setTimeout() would be the best function to do it. What you would be doing, is every time a key is released, a timer would be set to go off in 3 seconds, which calls a callback function that sends an AJAX request to the server to be sent to the other user to remove the typing notice. However, you need a way to be able to cancel that timer for when another key stroke is made. That is when the clearTimeout() function comes in handy. So long as your setTimeout function was saved into a variable and that variable is visible to other functions that need it, you can pass in the variable that saved the setTimeout function results into the clearTimeout function to stop it from going off. You will need to have clearTimeout calls in either result of the IF statement mentioned above so that you don't erroneously send a typing notice cancellation message to the server every couple seconds.

And note that this is a very simple solution. It could be made more clean and without global variables by using closures and/or OOP, but that will be another day (or a Google search for the probably hundreds of open source scripts that already do this). But this is easy and understandable without having to write a ton of pseudocode.

Also of notice is that you may need to make some kind of time buffer. It is possible with a very fast typer that the event handlers may start getting tripped up, AJAX call lag may start causing problems, or they may start using too much resources on a low-memory machine, depending on how complex the event handlers get (you always have to be careful with keystroke events). If this is the case, you would likely need to turn it all to timered callbacks, where once the user starts typing, you don't check again if they are still typing for a couple of seconds. Accuracy is not important in these types of systems. Facebook's chat typing notication can be off by as much as 2 or 3 seconds (or at least it could be when I tried it; they may have adopted websockets on browsers that can support it).

Here is a tutorial about setTimeout(), setInterval(), clearTimeout(), etc. if you need to brush up on them.

Hope this helps!

[UnknownUser]

this is what i got after a bit of work it is better then what i started with but still
not 110%..

Code: Select all

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();


    $('#usermsg').keydown(function(){
    if( $('#usermsg').val().length === 5) {
   $('#container').html('user is typing..');
   delay(function(){
      $.ajax({
                        url: "usercheck.php",
                        cache: false,
                        success: function(){   
                       
                }
                });
  }, 1500 );
  }
  });

   $('#usermsg').keyup(function(){
  	 if( $('#usermsg').val().length >= 6) {
  	 	$('#container').html('...');
  	 	}
  });