微信小程序实战案例计时器理解 JS 定时器与 CSS 视觉叠加摘要本篇基于案例 3.5 计时器讲解小程序中一次性定时器、循环定时器的实际开发结合页面状态控制、事件绑定、CSS 伪元素扩展效果梳理开发思路、踩坑点与知识点适合小程序初学者阅读。一、项目需求分析本次要完成一个倒计时小程序。打开小程序页面会先保持 2 秒空白2 秒之后完整的计时界面才展示出来。计时器初始数值固定为 60 秒页面包含三个交互按钮开始计时、停止计时、重新计时。业务逻辑规则有明确约束点击开始计时数字开始每秒递减点击停止计时倒计时暂停倒计时还没有归 0 的前提下再次点击开始计时可以继续接着之前剩余的时间倒计时。当倒计时数字变为 0 之后无论点击开始或者停止按钮数字都要保持为 0不再发生变化。点击重新计时倒计时直接重置回 60并且自动开启倒计时。拓展作业需求在显示数字的蓝色面板内部增加半透明的背景文字 “逝者如斯夫不舍昼夜”文字作为背景倒计时数字显示在文字上层实现文字叠加的视觉效果。二、项目初始化与全局配置新建小程序项目选择不启用云服务不使用项目模板。项目根目录下app.json是小程序的全局配置文件它负责登记项目页面路径、导航栏样式、渲染引擎、框架相关参数会对整个小程序全部页面生效。本案例中除了登记页面路径、自定义导航栏样式外重点指定渲染引擎为 webview。渲染引擎会影响组件、CSS 特性的兼容性本案例用到自定义导航栏组件需要该配置保证组件正常渲染。三、页面视图层设计WXML页面结构分为导航栏、滚动容器、计时内容盒子三大部分。使用hidden属性控制整个计时盒子的显示与隐藏。页面刚加载完成时盒子处于隐藏状态实现打开前两秒空白的效果延时结束后修改 hidden 状态界面展示。页面内部放置数字展示区域还有三个按钮。按钮通过bind:tap分别绑定点击事件分别对应开始、停止、重置的业务函数。当用户点击按钮小程序就会调用 JS 逻辑层对应的处理函数。页面使用数据绑定语法将倒计时数值和页面变量进行绑定JS 逻辑层更新数据之后视图层会自动刷新把最新数字渲染到界面。四、逻辑层核心JavaScript 定时器原理本案例核心就是 JavaScript 的两组定时器 API一次性定时器setTimeout循环定时器setInterval以及清除定时器clearInterval。setTimeout 一次性延时定时器页面生命周期 onLoad页面加载完成就会执行。调用 setTimeout 设置 2000 毫秒延时。这个定时器只会执行一次。等待 2 秒时间到执行显示界面的函数修改 hidden 的状态把计时界面展示出来实现初始 2 秒空白的交互效果。setInterval 循环定时器该定时器可以每隔固定毫秒重复执行函数。这里设置间隔为 1000 毫秒也就是 1 秒每一秒执行一次数字递减逻辑。调用之后会返回定时器编号我们需要把编号保存起来。后续暂停、重置的时候依靠这个编号关闭定时器。clearInterval 清除循环定时器循环定时器一旦开启就会一直运行。如果不手动清除就算倒计时结束定时器仍然会在后台持续运行造成逻辑错乱。所以停止计时、重新计时、倒计时归 0 这三种场景都必须调用清除定时器的方法终止循环执行。项目中定义了状态标记变量用来管控计时器是否允许启动。倒计时没有结束的时候标记为允许计时当倒计时走到 0标记修改为禁止计时。此时就算点击开始按钮也不会再开启定时器保证 0 之后时间不会继续变化。业务流程拆解点击开始计时按钮先判断状态标记如果允许计时则开启循环定时器每秒执行数字递减函数点击停止计时按钮调用清除定时器暂停倒计时。这里需要做判断如果此时数字已经为 0就不能修改计时状态标记防止倒计时结束后还可以再次启动计时倒计时每秒执行函数把最新数字同步更新页面。如果数字大于 0数字减一如果数字等于 0清除定时器关闭计时权限点击重新计时优先清除正在运行的定时器重置计时状态标记把数字恢复初始 60同步到页面自动调用开始计时。开发调试的时候我们在控制台打印每一秒的计时数字方便观察倒计时变化定位逻辑 bug。开发易错点很多初学者会遇到计时越跑越快的 bug根源就是重复开启定时器没有及时清除旧定时器。多次点击开始计时每点一次就新增一个定时器多个定时器同时执行数字就会快速减少。解决方案每次开启新定时器之前务必先调用 clearInterval 把旧定时器清除。另外一个容易出错点倒计时归零之后点击停止按钮不能把计时状态改回允许计时否则归零后还可以再次启动倒计时不符合业务需求。五、样式层WXSS 布局 CSS 伪元素拓展效果全局样式文件 app.wxss 存放所有页面公共样式定义外层盒子边框、标题文字样式。页面 wxss 处理页面布局、计时数字面板、按钮排版。基础布局使用弹性 flex 布局实现页面垂直排列按钮横向并排。计时数字面板设置蓝色背景黄色大号字体圆角红色边框。拓展作业实现背景叠加文字用到 CSS 相对定位、绝对定位与伪元素::before。实现关键点给计时面板父容器设置position:relative作为定位的参考基准使用::before伪元素通过 content 属性填入文字内容伪元素设置position:absolute基于父容器居中设置透明度让文字呈现半透明作为背景保证上层黄色倒计时数字可以清晰显示。伪元素的好处是不需要修改 WXML 页面结构只靠 CSS 就可以增加装饰文字。六、整体运行流程回顾小程序启动读取 app.json 全局配置加载首页页面触发 onLoad 生命周期开启 2 秒一次性延时定时器此时计时盒子 hidden 隐藏页面空白2 秒时间到达执行显示函数计时界面出现初始数字 60用户操作按钮触发对应的 tap 点击事件执行 JS 函数开启 / 关闭循环定时器循环定时器每秒执行修改数字同步渲染页面控制台输出计时数值倒计时到 0清除定时器锁定计时状态按钮不再可以启动倒计时点击重置清除定时器恢复初始状态重新开始倒计时。七、知识点总结app.json小程序全局配置管理页面列表、导航栏、渲染引擎等全局配置。定时器setTimeout做一次性延时setInterval周期性重复执行clearInterval关闭循环定时器用完必须清理避免多个定时器并发。页面生命周期 onLoad页面加载完毕触发适合做初始化、延时任务。hidden 属性控制组件显示隐藏不需要删除 DOM 节点。事件绑定 bind:tap实现按钮点击交互setData 完成逻辑层数据同步到视图层。CSS 定位父元素 relative 子元素 absolute伪元素::before 无需修改标签实现装饰叠加效果。拓展思考实际项目中定时器非常常见比如倒计时秒杀、轮播图、自动刷新。但要注意页面销毁的时候也要清除定时器避免定时器后台持续运行带来性能问题。
解法)
