เขียน javascript animation ด้วย requestAnimationFrame เพื่อประหยัดการใช้พลังงานของโลก!!

เขียนโดย เมื่อ

เห็นหัวข้อแล้วอาจจะคิดว่าไอ้นี่บ้าไปแล้วรึป่าว ฮ่าๆๆ ไม่บ้าก็ใกล้ล่ะครับ ^^ สำหรับเพื่อนๆ ที่ใช้ javascript ในการทำ animation หรือให้ทำงานเป็นลูปตามเวลาที่กำหนด ส่วนใหญ่แล้วอาจจะใช้ฟังก์ชัน setInterval() หรือ setTimeout() แต่สำหรับใครที่อยากจะเป็นส่วนหนึ่งที่ช่วยลดปัญหาโลกร้อนต้องหันมาใช้ requestAnimationFrame กันครับ ^^

ในการใช้งาน setInterval() เพื่อให้ได้ animation ที่ 60 fps เราจะใช้งานประมาณนี้ครับ

setInterval(function(){
    //animation code
}, 1000/60);

ส่วนการเขียน javascript ที่จะช่วยประหยัดพลังงานของโลกนั้น เราจะเปลี่ยนมาใช้ requestAnimationFrame แทนครับ แล้วจะช่วยให้ประหยัดพลังงานได้ยังไงน่ะเหรอครับ คืออย่างนี้ครับ ฟังก์ชันนี้จะไม่ทำงานถ้าหาก tab หรือ window นั้นไม่ได้ใช้งานอยู่ (inactive tab) นั่นก็หมายความว่า จะไม่มีการใช้งาน CPU, GPU และ Memory สำหรับรัน animation ของแท็บนั้น ทำให้เราไม่ต้องเปลืองพลังงานไปกับแท็บนั้นไงครับ

ส่วนรูปแบบการใช้งานฟังก์ชัน requestAnimationFrame() ก็ประมาณนี้ครับ

function myAnimation() {
    //animation code
    requestAnimationFrame(myAnimation);
}
requestAnimationFrame(myAnimation);

หวังว่าจะได้เป็นส่วนหนึ่งที่ช่วยลดโลกร้อนนะครับ ^^

ขอบคุณแหล่งข้อมูลครับ:

requestAnimationFrame for Smart Animating
Using requestAnimationFrame