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

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

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

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ หน่วงเวลา delay jquery event

ตัวอย่างโค้ดต่อไปนี้ใช้ ในกรณี ให้ส่งค่าข้อมูล หรือทำงานคำสั่งที่ต้องการ
หลังจากการพิมพ์ข้อมูล ตัวสุดท้ายแล้ว 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>

DEMO 1
DEMO 2

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

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

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ