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

จำนวนผู้เข้าชม : 105

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

เป็นยังไงกันบ้างคะสำหรับบทความ เทคนิค วิธีการ Set Delay ให้กับ Function Javascript ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย