จำนวนผู้เข้าชม : 167
เราขอแนะนำตัวอย่างโค้ด เทคนิค วิธีการ Set Delay ให้กับ Function Javascript โดยเทคนิคนี้ มักจะใช้กันในกรณีที่เราต้องการหน่วงเวลาก่อนที่สั่งให้ function ทำงาน เช่นในกรณีที่เราทำการ Resize Window หากไม่มีการหน่วงเวลา จะทำให้ Browser ใช้งานทรัพยากรเกินความจำเป็น ดังนั้นจึงจำเป็นต้อง Set Delay ให้กับ event ดังกว่าด้วย ส่วนวิธีทำ จะทำยังไง ลองตามมาดูจ้า
ตัวอย่าง การ Set Delay ให้กับ Javascript
ตัวอย่างโค้ด คือ ให้คำนวณขนาดของ Element ul และ li ใหม่ เมื่อมีการ Resize window โดยหน่วงเวลาไว้ที 500ms
<script> jQuery(document).ready(function(){ let timeout; jQuery( window ).resize(function() { window.clearTimeout(timeout); timeout = window.setTimeout(setBlockSize(), 500 ); }); function setBlockSize(){ let menu_length = jQuery('ul.menu li').length; let menu_width = Math.ceil(jQuery('.ul.menu').width()); let menu_li_width = menu_width/menu_length; jQuery('style[data-menu-style="true"]').empty().append(`.menu-wrapper ul.menu {width:${menu_width}px;}`); jQuery('style[data-menu-style="true"]').append(`.menu-wrapper ul.menu li{width:${menu_li_width}px;}`); } }); </script>
คำอธิบายเพิ่มเติม
- จากตัวอย่างโค้ดด้านล่าง คำอธิบายคือ ทำจะทำการ Set Delay ให้กับ Method Window.resize ให้ทำงานหลังจากเวลาผ่านไป 500ms
- การใช้งาน Method "window.clearTimeout()" ร่วมกับ "window.setTimeout()" จะช่วยป้องกันการใช้ทรัพยากรของเครื่องมากจนเกินไป
- แทนที่จะเรียกใช้งาน Function "setBlockSize()" ในทุก ๆ พิกเซลย่อขยาย เราสามารถใช้ Code ด้านล่างเพื่อลดการทำงานที่ซ้ำซ้อนและสั่งให้ Function "setBlockSize()" ทำงานเพียงครั้งเดียวหลังจากย่อขนายหน้าจอเสร็จ
<script> jQuery(document).ready(function(){ let timeout; //กำหนดตัวแปรสำหรับรับค่า Method window.setTimeout jQuery( window ).resize(function() { window.clearTimeout(timeout); //ในระหว่างที่ Resize window อยู่ จะทำการล้างค่าตัวแปร timeout ทุกทั้ง timeout = window.setTimeout(setBlockSize(), 500 ); //เมื่อ Resize window เสร็จให้เรียก Function setBlockSize() }); }); </script>
บทความอื่น ๆ ที่เกี่ยวข้องกับ Javascript/jQuery
เป็นยังไงกันบ้างคะสำหรับบทความ เทคนิค วิธีการ Set Delay ให้กับ Function Javascript ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย
เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก
อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<