Ever seen those handy dandy sites that preform some action AFTER you finish typing, rather than slowing down your device by trying to repeat the action for every character? Wanna know how to do it? GOOD! Then you're in the right place. This "type waiting" is actually very easy! It's all about timing ... or timers rather.
The one flaw to the following system is being unable to know the average type speed of a user. This is often countered by simply using a 2 second timer (although many sites use only a 1 second timer and preform fine). Two seconds is optimal because it is both: an easy amount of time that most people don't mind waiting to see a reaction, and is usually plenty of time to decide if even a "hunt 'n peck" user has stopped typing. However, you will only know what works best for your sight through experimentation. Now, who wants code?
On with the code! First I will example this action in javascript (hang on jQuery users, you're next) as it is really quite simple and will help you get a better idea of what is going on. The first thing you need to do is create a variable outside of your functions (preferably global, but its up to you, how, when, and where you want to use it). It doesn't have to be anything fancy, but be careful of name-spacing as per usual.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// A simple timer var is like | |
var tmrStopType |
Ok, now that the hard part is over let's create our initial function.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Again, what you name the function is clearly up to you, I wouldn't really recommend my example name as it is just plain bad :P | |
function stopType() { | |
// The following if statement will check if your timer has been assigned yet, and if so, clears it so it will no longer continue to your work function | |
if (tmrStopType!= undefined) clearTimeout(tmrStopType); | |
// The following will attempt to start your work function after 2 seconds unless interrupted and reset by previous if statement | |
// Also, many people would rather write this statement as tmrStopType= setTimeout(stopTypeWork(), 2000); | |
// If, you want to, that is fine, i don't because it is not a style of timer writing that is readable to ALL browsers, however, the following is | |
tmrStopType= setTimeout(function (){ stopTypeWork() }, 2000); | |
}; |
Finally the really easy part, your WORK! Simply write the function you want called after the typeing timer stops!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function stopTypeWork() { | |
// do work | |
} |
With all the functions made, the rest is too easy. Simply find the element you want to attach it too.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.getElementById('someInputID').onkeypress = stopType; |
Now, for those of you using jQuery:
Create your variable.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// A simple timer var is like | |
var tmrStopType |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$("#inputID").keypress(function(e){ | |
if (tmrStopType!= undefined) clearTimeout(tmrStopType); | |
tmrStopType= setTimeout(function (){ stopTypeWork() }, 2000); | |
}); | |
function stopTypeWork() { | |
// do work | |
} |
No comments:
Post a Comment