uniapp计时器

### UniApp 中实现计时器功能 在 UniApp 开发框架中，可以通过 JavaScript 的 `setInterval` 和 `clearInterval` 方法来实现基本的计时器功能[^1]。以下是具体的代码示例： #### 基本计时器功能 ```javascript // 定义全局变量用于存储时间间隔ID let timerId; export default { data() { return { seconds: 0, // 记录已过去的秒数 }; }, methods: { startTimer() { this.seconds = 0; // 初始化时间为0 clearInterval(timerId); // 清除之前的定时器以防重复启动 timerId = setInterval(() => { this.seconds++; // 每隔一秒增加一次 }, 1000); }, stopTimer() { clearInterval(timerId); // 停止计时器 }, resetTimer() { this.stopTimer(); // 首先停止计时器 this.seconds = 0; // 将时间重置为0 } }, onUnload() { // 页面卸载时清除定时器 clearInterval(timerId); } }; ``` 上述代码展示了如何通过 Vue 组件的方式，在页面加载完成后调用 `startTimer()` 启动计时器，并可以分别通过 `stopTimer()` 和 `resetTimer()` 来停止和重置计时器。 --- #### 实现倒计时功能 如果需要实现倒计时，则可以利用类似的逻辑并结合目标时间戳计算剩余时间[^2]。以下是一个完整的倒计时组件实例： ```html <template> <view class="countdown"> 距离结束还有 {{ days }} 天 {{ hours }} 小时 {{ minutes }} 分钟 {{ seconds }} 秒 </view> </template> <script> export default { data() { return { endTime: new Date('December 31, 2023 23:59:59').getTime(), // 设置目标时间 countdown: null, days: '0', hours: '0', minutes: '0', seconds: '0' }; }, mounted() { this.startCountdown(); }, beforeDestroy() { clearInterval(this.countdown); }, methods: { startCountdown() { const countDownDate = this.endTime; this.countdown = setInterval(() => { const now = new Date().getTime(); // 获取当前时间的时间戳 const distance = countDownDate - now; // 时间差 if (distance <= 0) { clearInterval(this.countdown); // 如果已经到达终点则清空定时器 this.days = '0'; this.hours = '0'; this.minutes = '0'; this.seconds = '0'; return; } this.days = Math.floor(distance / (1000 * 60 * 60 * 24)); // 计算天数 this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 计算小时数 this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // 计算分钟数 this.seconds = Math.floor((distance % (1000 * 60)) / 1000); // 计算秒数 }, 1000); } } }; </script> ``` 此代码片段实现了基于指定日期的目标倒计时功能，支持动态更新天、小时、分、秒等字段。 --- #### 录音计时场景下的应用 对于更复杂的场景，比如录音过程中实时显示录制时长的功能，也可以借助相同的原理实现[^3]。具体来说，可以在录音开始时启动计时器，并在录音结束后停止计时器。 ```javascript methods: { startRecording() { uni.getRecorderManager().start(); // 启动录音 this.timerStart(); // 并行启动计时器 }, timerStart() { let timeElapsed = 0; this.recordingTime = ''; this.intervalId = setInterval(() => { timeElapsed += 1; this.recordingTime = `${Math.floor(timeElapsed / 60)}:${timeElapsed % 60}`; // 显示格式化后的时长 }, 1000); }, stopRecording() { uni.getRecorderManager().stop(); // 结束录音 clearInterval(this.intervalId); // 停止计时器 } } ``` 该方法适用于需要同时处理多媒体资源与计时的应用场景。 --- #### MQTT 协议中的检测计时案例 在某些物联网项目中，可能还需要配合 MQTT 协议完成特定的任务，例如设备状态监控或超时判断[^4]。此时可将计时器嵌入到消息订阅回调函数中，从而精确控制任务执行周期。 ```javascript import mqtt from 'mqtt'; const client = mqtt.connect('ws://broker.hivemq.com'); client.on('connect', () => { console.log('Connected to MQTT broker'); }); client.subscribe('device/detection/status', (err) => { if (!err) { let detectionTimeout = setTimeout(() => { console.log('Device not detected within expected timeframe.'); clearTimeout(detectionTimeout); }, 10000); client.publish('device/command', JSON.stringify({ action: 'detect' })); client.on('message', (_, payload) => { const message = JSON.parse(payload.toString()); if (message.status === 'detected') { clearTimeout(detectionTimeout); // 若成功接收到响应则取消超时机制 console.log('Device successfully detected!'); } else { console.error('Error during device detection:', message.message); } }); } }); ``` 这段代码演示了如何结合 MQTT 进行远程设备的状态监测以及相应的超时保护措施。 ---