Aug
10
2010

มารู้จักกับ jQuery .delay กันบ้างครับ

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

วันนี้นั่งๆทำงานอยู่ เจอปัญหาอยู่อย่างหนึ่ง เกี่ยวกับว่า หลังจากเรา Click ที่ปุ่มปุ่มหนึ่งแล้ว ทำงานบางอย่างเสร็จ ต้องการจะให้หน่วงเวลาไปสัก สิบวินาที แล้วค่อยทำงานต่อ จะทำไงดี ก็นึกขึ้นได้ว่า jQuery มีอยู่ Function หนึ่งที่ใช้ในการหน่วงเวลา นั้นก็คือ .delay นั้นเอง jquery delay นั้นจัดอยู่ในหมวดของ Effect โดยใช้งานร่วมกับ Effect เป็นส่วนใหญ่เช่นพวก fadeIn, fadeOut, slideUp , sildeDown มาลองกันเลยดีกว่าจะได้้เข้าใจ

Code ตัวอย่างด้านล่างนี้ เป็นตัวอย่างการทำงานของ function delay ของ jQuery เมื่อทำการคลิกที่ปุ่ม Div ที่เราได้ select เอาไว้ก็จะ slideUp หรือ หดขึ้น จากนั้นก็ delay ไป 800 milliseconds ถึงจะเริ่มคำสั่ง fadeIn ต่ออีกที

1
2
3
4
5
6
7
8
9
10
11
12

//HTML
<div id="myDiv" style="background-color: red;">MyDIV</div>
<input id="myButton" type="button" value="Click Here" />

//JavaScript
<script type="text/javascript">
$("#myButton").click(
function(){
$("#myDiv").slideUp(300).delay(800).fadeIn(400);
}
);
</script>

หวังว่าในบทความนี้เพื่อนๆคงจะได้นำเอาไปใช้ประโยชน์ได้พอสมควรสำหรับการหน่วงเวลา ที่จะแสดง หรือให้ทำคำสั่งต่อไป ตอนนี้อาจจะมองไม่ออกครับว่ามันจะเอาไปใช้ในเหตุการณ์อะไรดี แต่ต้องมีแน่ๆครับศึกษาไว้ไม่เสียหลาย (พอดีผมเองลืมครับว่านึกถึง delay ขึ้นมาเพราะต้องเอามาแก้กับงานอะไรสักงานเนี่ยแหละ)

เจอกับบทความหน้าครับ