vue實現(xiàn)簡易計時器組件
在做項目中難免會碰到需要實時刷新,廣告動畫依次出現(xiàn)等等需求,剛最近基于業(yè)務(wù)需求,需要實現(xiàn)一個累加通話時長的計時器,這時候就需要定時器登上我們的代碼舞臺了,其實對于計時器,它的原理就是通過定時器來實現(xiàn)的,那么在寫業(yè)務(wù)需求之前,我先說說關(guān)于定時器的一些知識。
window對象提供了兩個方法來實現(xiàn)定時器的效果,分別是window.setTimeout()和window.setInterval。
在Javascript中,代碼一般都是同步執(zhí)行的,但定時器卻是異步執(zhí)行的。
window.setTimeout(callback,delay); //callback:回調(diào)函數(shù) delay:時間間隔時長window.setInterval(callback,delay);
定時器分為隔時定時器setInterval和延時定時器setTimeout
那么它們兩到底有什么區(qū)別呢?
setInterval以指定時間為周期循環(huán)執(zhí)行,一般用于刷新表單、復雜動畫的循環(huán)執(zhí)行,對于一些表單的實時指定時間刷新同步 setTimeout只在指定時間后執(zhí)行一次,像有些網(wǎng)站剛進去會出現(xiàn)一個彈窗廣告,一般都是用的setTimeout了解了定時器的基本知識之后,那么接下來就可以進行功能的實現(xiàn)了。
HTML
<template> <div class='timer'> <div>{{nowTime}}</div> </div></template>
Javascript
<script> export default { name: ’Timer’, data () { return { timer: null, nowTime:'', hour: 0, minutes: 0, seconds: 0 } }, created () { this.timer = setInterval(this.startTimer, 1000); }, destroyed () { clearInterval(this.timer); },methods: { startTimer () { //建議開啟定時器前,先清除定時器,避免定時器累加,出現(xiàn)不可預期的bug if(this.timer) { clearInterval(this.timer); } this.seconds += 1; if (this.seconds >= 60) { this.seconds = 0; this.minutes= this.minutes+ 1; } if (this.minutes>= 60) { this.minutes= 0; this.hour = this.hour + 1; } this.nowTime = this.toZero(this.hour): this.toZero(this.minutes):this.toZero(this.seconds) }, toZero(timeNumber) { return timeNumber<10?'0'+timeNumber:timeNumber }, }}</script>
這樣,一個簡單的計時器組件就實現(xiàn)好了,其實還有其他的實現(xiàn)思路,如果以后開發(fā)碰到了類似的需求,可以借鑒,希望對你們有所幫助。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 詳解Android studio 動態(tài)fragment的用法2. 編程語言PHP在Web開發(fā)領(lǐng)域的優(yōu)勢在哪?3. Android如何加載Base64編碼格式圖片4. 基于android studio的layout的xml文件的創(chuàng)建方式5. Spring Boot和Thymeleaf整合結(jié)合JPA實現(xiàn)分頁效果(實例代碼)6. 解決Android studio xml界面無法預覽問題7. 什么是python的自省8. 圖文詳解vue中proto文件的函數(shù)調(diào)用9. Springboot Druid 自定義加密數(shù)據(jù)庫密碼的幾種方案10. Vuex localStorage的具體使用

網(wǎng)公網(wǎng)安備