ทำ Queue ใช้เอง เพื่อแก้ปัญหาง่ายๆ ใน Vue.js
การทำงานของ Queue นั้นไม่ซับซ้อนอะไรมาก คือ ใครมาก่อน ก็ได้ก่อน หรือ FIFO(First In First Out) ซึ่งหลายๆคนก็น่าจะได้เรียนกันมาแล้วในวิชา Data Structure ถ้านึกไม่ออกก็ลองนึกถึงตอนที่ไปต่อคิวตามหน้าร้านอาหารดังๆกันดู
Queue นี้แหละที่จะเข้ามาแก้ปัญหาความไม่เป็นระเบียบ ของระบบที่มันไม่สมดุล อย่างเช่น ร้านอาหารดังๆ ที่มีคนอยากจะไปกินกันเยอะกว่า จำนวนโต๊ะที่สามารถให้บริการในเวลานั้นได้ ทำให้จะต้องมีคนที่จะไม่ได้รับบริการในเวลานั้นอยู่จำนวนหนึ่ง และก็อาจจะมีคนใหม่ๆ เข้ามาเพิ่มอีกเรื่อยๆ ทีนี้ลองนึกภาพดูกันว่าถ้าไม่มีการจัดคิว มันจะเกิดอะไรขึ้น เช่น มีคนรออยู่ที่หน้าร้าน 20 กว่าคน แล้วอยู่ๆพนักงานก็เดินออกมาเรียกคนที่พึ่งมาถึงเข้าไปรับบริการในร้านก่อนคนอื่นๆที่มารอก่อนหน้านั้น มันคงจะต้องมีดราม่าเกินขึ้นแน่ๆ ใช้ไหมละ ดังนั้นร้านอาหารดังๆเหล่านั้นก็เลยจะต้องมีระบบคิว โดยบางร้านก็ใช้วิธีจดชื่อใส่กระดาษธรรมดาๆ หรือบางร้านก็อาจจะมี App ให้ลูกค้าใช้งานได้สะดวกขึ้น ซึ่งก็แก้ปัญหาได้เหมือนๆกัน
ดังนั้นการแก้ปัญหาด้วย Queue แบบนี้เราก็สามารถเอามาประยุกต์ใช้ในการเขียนโปรแกรมเพื่อแก้ปัญหาในลักษณะนี้ได้เช่นเดียวกัน
เดี๋ยวเราลองหาปัญหาง่ายๆ มาแก้ด้วยการใช้ Queue กันดีกว่า
ปัญหา:
สมมุติว่าโปรแกรมเราเป็นร้านอาหาร ที่มีพ่อครัวอยู่แค่คนเดียว แต่ดันขายดีเกินไป ทำให้มีลูกค้ามารออยู่เต็มร้านเลย ทีนี้ก็เลยจะเอาระบบ Queue มาช่วยเพื่อคอยจัดการลำดับการทำอาหารของพ่อครัว
เริ่มเขียนโปรแกรมกันเลย
และเพื่อความรวดเร็วในการเขียน เดี๋ยวขอใช้ Vue.js ในการเอามาแก้ปัญหานี้ก็แล้วกัน
เริ่มต้นด้วยผมจะใช้ template จาก jsfiddle อันนี้
จากนั้นผมจะสร้าง Array ขึ้นมาตัวหนึ่งเพื่อเป็น Queue ของเราในครั้งนี้ โดยจะตั้งชื่อว่า queueOrders โดยเราจะเริ่มแบบง่ายๆกันก่อน ซึ่งใน queueOrders จึงจะเก็บแค่ String ไปก่อน ว่ามีลูกค้าสั่งอะไรเข้ามาบ้าง
ต่อไปก็จะเพิ่มให้มีการสั่ง Order ใหม่ๆเข้ามาได้ โดยจะใช้ Array.push() เพื่อเพิ่มรายการอาหารใหม่เช้าไปต่อใน Queue
หลังจากเรามี Queue เรียบร้อยแล้ว เราจะมาสร้าง method ชื่อว่า chef เพื่อจะคอยเอา Order ออกไปทำ โดยเราจะใช้ Array.shift() ในการดึงค่าตำแหน่งแรกจาก Array ออกมาใส่ไว้ที่ตัวแปร cooking เพื่อบอกว่าพ่อครัวกำลังทำ Order ไหนอยู่ในเวลานั้น หลังจากนั้นเราจะลองจำลองเวลาในการทำอาหารด้วยการหน่วงเวลาโดยใช้ function setTimeout() เพื่อหน่วงเวลาไว้ไม่ให้ทำเสร็จเร็วจนเกินไป เดี๋ยวจะดูผลลัพท์ไม่ทันกัน หลังจากหน่วงเวลาเสร็จเราจะให้ chef เรียกตัวเองเพื่อไปหยิบ Order ใหม่มาทำต่อไป
เพื่อให้ chef เริ่มทำงานตั้งแต่ต้น เราจะเอา this.chef() ไปใส่ไว้ใน mounted
เสร็จแล้วกับตัวอย่างง่ายๆในการเอา Queue ไปใช้ สามารถดู Code ที่สมบูรณ์ได้ที่ jsfiddle ข้างล่างนี้เลย
