เทคนิค หน่วงเวลา กับ event keyup ด้วย jQuery
เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdeeหน่วงเวลา delay jquery event
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ หน่วงเวลา delay jquery event
ไปที่
Copy
ตัวอย่างโค้ดต่อไปนี้ใช้ ในกรณี ให้ส่งค่าข้อมูล หรือทำงานคำสั่งที่ต้องการ
หลังจากการพิมพ์ข้อมูล ตัวสุดท้ายแล้ว 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 สำหรับอ้างอิง
Top
Copy
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ