Noise2Void实战：单张噪声图像自监督去噪原理与避坑指南
2026/10/14 23:07:28
一、需求背景
本次作业要实现一个微信小程序计时器：打开页面先空白，2 秒后显示计时界面，初始倒计时 60 秒，支持开始、停止、重新计时三个操作，并在倒计时归 0 后保持数字不再变化。另附扩展作业：数字框背景加水印文字「逝者如斯夫，不舍昼夜」。
二、整体思路
核心是定时器（setInterval）+ 页面数据绑定（setData）：
- 用
hidden属性配合setTimeout实现 "2 秒后显示"。 - 用
setInterval每秒触发一次递减逻辑，把结果写回num。 - 用变量
isOver标记是否已归 0，控制归 0 后不再变化。
三、页面结构
<!--index.wxml-->
<navigation-bar title="计时器" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<view class="box"hidden="{{hidden}}">
<view class="title">计时器函数的应用</view>
<view class="time">{{num}}</view>
<view class="btn-layout">
<button type="primary" size="mini" bind:tap="start">开始计时</button>
<button type="primary" size="mini" bind:tap="stop">停止计时</button>
<button type="primary" size="mini" bind:tap="restart">重新计时</button>
</view>
</view>
</scroll-view>
四、核心逻辑实现
// index.js
let num = 60
let isTime = true
let timerId
Page({
data: {
hidden: true,
num
},
onLoad() {
setTimeout(() => {
this.show()
}, 2000)
},
show() {
this.setData({
hidden: false
})
},
start() {
if (isTime) {
timerId = setInterval(() => {
this.timer()
}, 1000)
}
},
timer() {
console.log(num)
this.setData({
num
})
if (num > 0) {
num--
} else {
clearInterval(timerId)
isTime = false
}
},
stop() {
clearInterval(timerId)
isTime = true
},
restart() {
clearInterval(timerId)
isTime = true
num = 60
this.setData({
num
})
this.start()
}
})
五、关键技术点解析
- 定时器去重：
start()里if (timerId) return防止连点开启多个 setInterval，避免数字跳变。 - 归 0 锁定：用
isOver标记状态，倒计时到 0 后任何开始 / 停止都不改变数字。 - 暂停可继续：
stop()只clearInterval不清isOver，所以再点开始能接着倒计时。 - 重新计时：先清旧定时器，再重置 num 和状态，最后自动调用 start。
六、扩展作业：背景水印文字
用 CSS 伪元素::before实现，数字通过 z-index 置于水印之上：
.time {
width: 90%;
background-color: blue;
color: yellow;
font-size: 200rpx;
text-align: center;
border: 2rpx solid red;
border-radius: 60rpx;
margin: 30rpx;
position: relative;
}
.time::before {
content: "逝者如斯夫，不舍昼夜";
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 32rpx;
color: #cccccc;
opacity: 0.4;
z-index: 1;
}
七、踩坑实录：
开发过程中踩过一个隐蔽的坑：在倒计时进行时多次点击「开始计时」，数字递
减速度竟成倍加快，从每秒 1 变成每秒 2、3，甚至更快。
原因在于： start 里直接 setInterval 创建定时器，未做去重判断。每次点击都会新建
一个定时器，多个 setInterval 叠加执行，同一秒内递减多次，导致倒计时加速、计时失
准。
解决方法：是给定时器加去重与锁定：用 timerId 判空防止重复创建，用 isOver 标记
倒计时是否结束，归 0 后禁止再开启；停止时清理定时器并置空 timerId。改完后无论
怎么点击，都只会有一个定时器在运行。
八、小结
这个案例虽然小，但覆盖了小程序开发的几个核心点：生命周期、定时器管理、数据绑定、CSS 伪元素，以及最实用的 "报错排查思路"。掌握这套逻辑，就能迁移到秒表、答题倒计时、抢购倒计时等更多场景。