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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
event หน่วงเวลา delay jquery

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

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


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





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











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





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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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







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