เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

เราขอแนะนำตัวอย่างโค้ด เทคนิค วิธีการ 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 <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

Javascript เทคนิค Check & Get ค่า Hash จาก URL

Javascript เทคนิค Check & Get ค่า Hash จาก URL

ดูเพลิน Admin - 26 ม.ค. 66
Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

ดูเพลิน Admin - 11 ม.ค. 66
Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

ดูเพลิน Admin - 26 ธ.ค. 65
เทคนิค วิธีการดึงค่า multiple value จาก checkbox ด้วย jQuery

เทคนิค วิธีการดึงค่า multiple value จาก checkbox ด้วย jQuery

ดูเพลิน Admin - 02 มี.ค. 66
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65
Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...