Many times we need instant result of whatever the change has been made. For calculation we define some function and do calculation there or for search we do ajax call. But for result we we call our function /ajax on every keyup event then what happen if i have to search a name "gautam" then then function calls 6 times as each keyup but 5 call is a waste as i am searching for "gautam" not for each character as typed.
In short we should call our function or ajax request when user stop typing not on each and every key up. For it we may guess when user type halts for a second or two second then his typing is finished and we can do whatever the result he wants.
<!DOCTYPE html>
<html>
<head>
<title>call js function when stop typing</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#in').keyup(function() {
s = $('#in').val();
setTimeout(function() {
if($('#in').val() == s){ // Check value is last typed or not.
// call ajax or any function or whaterver you wnat
var v = $("#in").val();
$("#out").html(v);
}
}, 1000); // 1 sec delay to check.
});
});
</script>
</head>
<body>
<input id="in" type="text"/>
<div id="out"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>call js function when stop typing</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
var typingTimer; //timer identifier
var doneTypingInterval = 1000; //time in ms, 5 second for example
//on keyup, start the countdown
$('document').ready(function(){
$('#in').keyup(function(){
clearTimeout(typingTimer);
if ($('#in').val) {
typingTimer = setTimeout(function(){
//do stuff here e.g ajax call etc....
var v = $("#in").val();
$("#out").html(v);
}, doneTypingInterval);
}
});
});
</script>
</head>
<body>
<input id="in" type="text"/>
<div id="out"></div>
</body>
</html>
In short we should call our function or ajax request when user stop typing not on each and every key up. For it we may guess when user type halts for a second or two second then his typing is finished and we can do whatever the result he wants.
<!DOCTYPE html>
<html>
<head>
<title>call js function when stop typing</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#in').keyup(function() {
s = $('#in').val();
setTimeout(function() {
if($('#in').val() == s){ // Check value is last typed or not.
// call ajax or any function or whaterver you wnat
var v = $("#in").val();
$("#out").html(v);
}
}, 1000); // 1 sec delay to check.
});
});
</script>
</head>
<body>
<input id="in" type="text"/>
<div id="out"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>call js function when stop typing</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
var typingTimer; //timer identifier
var doneTypingInterval = 1000; //time in ms, 5 second for example
//on keyup, start the countdown
$('document').ready(function(){
$('#in').keyup(function(){
clearTimeout(typingTimer);
if ($('#in').val) {
typingTimer = setTimeout(function(){
//do stuff here e.g ajax call etc....
var v = $("#in").val();
$("#out").html(v);
}, doneTypingInterval);
}
});
});
</script>
</head>
<body>
<input id="in" type="text"/>
<div id="out"></div>
</body>
</html>
No comments:
Post a Comment