Question

I have a div being refreshed every x seconds or so. Within this div I have a textarea. What I’m trying to do is if the user starts to type in this textarea, then don’t refresh the div, otherwise, keep refreshing.

This is the JS to detect the keydown in the textarea, the problem I’m having is that it’s making typing in the textarea laggy because the JS keeps running for every keystroke. How I can I only make this run once?

<script type="text/javascript">
$("#comment_textarea").live('keydown', function() {
   $('form #comment_textarea').elastic();   
   clearInterval(auto_refresh); auto_refresh = 0;
});
</script>

Answer 1

It’s most likely the elastic plugin you’re calling, because clearing an interval every keystroke shouldn’t create much (if any) lag.

If the elastic plugin is something that changes the textarea when the user focus’ the input element then you can bind it to the focus event instead so it doesn’t run each keystroke:

<script type="text/javascript">
$(document).delegate("#comment_textarea", "keydown", function () {  
    clearInterval(auto_refresh);
    auto_refresh = 0;
}).delegate("#comment_textarea", "focus", function () {
    $('#comment_textarea').elastic(); 
});
</script>

Notice I used .delegate() instead of .live(). .delegate() allows you to select a root element other than document.

If you need to have the elastic plugin call inside your keydown event handler or are still having lag issues you can always check the value of the auto_refresh variable:

if (auto_refresh !== 0) {
    clearInterval(auto_refresh);
    auto_refresh = 0;
}

This code would go inside your keydown event handler.