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

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

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

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

ดูแล้ว 22,685 ครั้ง

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

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน