PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


เทคนิค หน่วงเวลา กับ event keyup ด้วย jQuery

23 March 2011 By
event jquery หน่วงเวลา delay


ตัวอย่างโค้ดต่อไปนี้ใช้ ในกรณี ให้ส่งค่าข้อมูล หรือทำงานคำสั่งที่ต้องการ
หลังจากการพิมพ์ข้อมูล ตัวสุดท้ายแล้ว 3 วินาที (สามารถกำหนดเวลาตามต้องการ)
เหมือนกับให้โปรแกรมทำงาน หลังจากพิมพ์ข้อมูลตัวสุดท้ายแล้วเท่านั้น ซึ่งโดยปกติ หาก
ไม่ได้กำหนดโค้ดตามนี้ คำสั่งต่างๆ จะทำงานทันทึเมื่อกดพิมพ์ข้อมูล แม้ว่าข้อมูลยังทำการพิมพ์ยังไม่เสร็จ

ตัวอย่างโค้ดที่ทำงานทันทีเมื่อทำการพิมพ์ข้อมูล
 

<form id="form1" name="form1" method="post" action="">
  <input name="sample_input" type="text" id="sample_input" size="40" />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#sample_input").keyup(function(event){
		var input_data=$("#sample_input").val();
		alert(input_data);		
	});
});
</script>

ตัวอย่าง

ตัวอย่างโค้ดกรณีหน่วงเวลา ให้ทำงานหลังจากพิมพ์ข้อมูลตัวสุดท้ายแล้ว 3 วินาที
 

<form id="form1" name="form1" method="post" action="">
  <input name="sample_input" type="text" id="sample_input" size="40" />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	var delayID=null;
	$("#sample_input").keyup(function(event){
		if(delayID==null){
			delayID=setTimeout(function(){
				var input_data=$("#sample_input").val();
				alert(input_data);
				delayID=null;
			},3000);							
		}else{
			if(delayID){
				clearTimeout(delayID);
				delayID=setTimeout(function(){
					var input_data=$("#sample_input").val();
					alert(input_data);
					delayID=null;
				},3000);						
			}		
		}
	});
});
</script>

ตัวอย่าง

 



   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 15-04-2017


สามารถเขียนให้สั้นลงและกระชับได้เป็นดังนี้

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>  
</head>
<body>

<form id="form1" name="form1" method="post" action="">
  <input name="sample_input" type="text" id="sample_input" size="40" />
</form>
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
	var delayID=null;
	$("#sample_input").on("keyup",function(event){
		if(delayID){ clearTimeout(delayID);} 
		delayID=setTimeout(function(){
			var input_data=$("#sample_input").val();
			console.log(input_data); // ทำคำสั่งที่ต้องการ
			delayID=null;
		},3000);    		     		
	});
});
</script>
  
</body>
</html>


   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 15-04-2017


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>  
</head>
<body>
 
<form id="form1" name="form1" method="post" action="">
<input name="value1" type="text" id="textone" size="10" maxlength="5">
<input name="result" type="text" id="result" size="10" readonly>
</form>
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
    var delayID=null;
    $("#textone").on("keyup",function(event){
        var result=0;
        var textone=$("#textone").val();
        textone = parseFloat(textone);      
        if(isNaN(textone)){
          $("#textone").val("");
          return false;
        };
        textone = (!isNaN(textone))?textone:0;        
        if(delayID){ clearTimeout(delayID);} 
        delayID=setTimeout(function(){ 
            if(textone<=20){
              result = 0;
            }else{
              result = parseFloat(textone - 20);
              textone=20;
            }
            $("#textone").val(textone);
            $("#result").val(result.toFixed(2));
            console.log(textone); // ทำคำสั่งที่ต้องการ
            delayID=null;
        },2500);                        
    });
});
</script>
   
</body>
</html>









Tags:: event jquery หน่วงเวลา delay






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง