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

23 March 2011 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

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

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ 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>