在做項(xiàng)目中難免會(huì)碰到需要實(shí)時(shí)刷新，廣告動(dòng)畫依次出現(xiàn)等等需求，剛最近基于業(yè)務(wù)需求，需要實(shí)現(xiàn)一個(gè)累加通話時(shí)長(zhǎng)的計(jì)時(shí)器，這時(shí)候就需要定時(shí)器登上我們的代碼舞臺(tái)了，其實(shí)對(duì)于計(jì)時(shí)器，它的原理就是通過定時(shí)器來實(shí)現(xiàn)的，那么在寫業(yè)務(wù)需求之前，我先說說關(guān)于定時(shí)器的一些知識(shí)。

window對(duì)象提供了兩個(gè)方法來實(shí)現(xiàn)定時(shí)器的效果，分別是window.setTimeout()和window.setInterval。

在Javascript中，代碼一般都是同步執(zhí)行的，但定時(shí)器卻是異步執(zhí)行的。

window.setTimeout(callback,delay); //callback:回調(diào)函數(shù) delay：時(shí)間間隔時(shí)長(zhǎng)window.setInterval(callback,delay);

定時(shí)器分為隔時(shí)定時(shí)器setInterval和延時(shí)定時(shí)器setTimeout

那么它們兩到底有什么區(qū)別呢？

setInterval以指定時(shí)間為周期循環(huán)執(zhí)行，一般用于刷新表單、復(fù)雜動(dòng)畫的循環(huán)執(zhí)行，對(duì)于一些表單的實(shí)時(shí)指定時(shí)間刷新同步 setTimeout只在指定時(shí)間后執(zhí)行一次,像有些網(wǎng)站剛進(jìn)去會(huì)出現(xiàn)一個(gè)彈窗廣告，一般都是用的setTimeout

了解了定時(shí)器的基本知識(shí)之后,那么接下來就可以進(jìn)行功能的實(shí)現(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 () { //建議開啟定時(shí)器前，先清除定時(shí)器，避免定時(shí)器累加，出現(xiàn)不可預(yù)期的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>

這樣，一個(gè)簡(jiǎn)單的計(jì)時(shí)器組件就實(shí)現(xiàn)好了，其實(shí)還有其他的實(shí)現(xiàn)思路，如果以后開發(fā)碰到了類似的需求，可以借鑒，希望對(duì)你們有所幫助。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。