mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 14:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(chronometer): improved chronometer precision

Browse source
This commit is contained in:
Corentin Thomasset 2022-08-04 09:06:42 +02:00
parent fda0b0ca25
commit e48d60b1ed
No known key found for this signature in database
GPG key ID: 3103EB5E79496F9C
3 changed files with 37 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/tools/chronometer/chronometer.vue
View file

@ -1,11 +1,11 @@
<template>
<div>
<n-card>
<div class="duration">{{ formatChronometerTime({ elapsed: counter, msPerUnit }) }}</div>
<div class="duration">{{ formatMs(counter) }}</div>
</n-card>
<br />
<n-space justify="center">
<n-button v-if="!isActive" secondary type="primary" @click="resume">Start</n-button>
<n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
<n-button v-else secondary type="warning" @click="pause">Stop</n-button>
<n-button secondary @click="counter = 0">Reset</n-button>
@ -14,12 +14,33 @@
</template>
<script setup lang="ts">
import { useInterval } from '@vueuse/core';
import { formatChronometerTime } from './chronometer.service';
import { useRafFn } from '@vueuse/core';
import { ref } from 'vue';
import { formatMs } from './chronometer.service';
const msPerUnit = 10;
const isRunning = ref(false);
const counter = ref(0);
const { counter, pause, resume, isActive } = useInterval(msPerUnit, { controls: true, immediate: false });
let previousRafDate = Date.now();
const { pause: pauseRaf, resume: resumeRaf } = useRafFn(
() => {
const deltaMs = Date.now() - previousRafDate;
previousRafDate = Date.now();
counter.value += deltaMs;
},
{ immediate: false },
);
function resume() {
previousRafDate = Date.now();
resumeRaf();
isRunning.value = true;
}
function pause() {
pauseRaf();
isRunning.value = false;
}
</script>
<style lang="less" scoped>