setTimeout(func, time)可以使得每隔time毫秒就执行一次func函数,常用来做计时器/时钟。

下面是在微信小程序中的使用思路,只截取了关键部分代码。

var timer; // 计时器

Page({
// ...省略

// 自定义的开始按钮
startBtn: function () {
console.log("开始按钮");
Countdown();
},   // 自定义的暂停按钮
pauseBtn: function () {
console.log("暂停按钮");
clearTimeout(timer);
},
}); // 倒计时
function Countdown() {
timer = setTimeout(function () {
console.log("----Countdown----");
Countdown();
}, );
};

思路:

  • setTimeout()延迟指定毫秒数后执行指定函数,可通过递归调用setTimeout()来实现各种计时器功能。
  • 如果想做每秒钟刷新一次的时钟,只需每次执行时间转换函数并setData更新界面即可。
  • 使用clearTimeout("定时器的名字")可以停下指定的计时器。

下面是Javascript关于时间的转换函数。

// 秒数 --> 时:分:秒
function formatTime(seconds) {
return [
parseInt(seconds / / ), // 时
parseInt(seconds / % ), // 分
parseInt(seconds % ) // 秒
]
.join(":")
.replace(/\b(\d)\b/g, "0$1");
}

另外,做定时重复调用函数的功能时,用setTimeOut()代替setInterval(),因为setInterval()是有误差的!详情参考

参考资料:

【微信小程序】使用setTimeout制作定时器的思路的更多相关文章

  1. 微信小程序如何开发制作

    微信小程序如何开发制作 微容SMO是一款微信小程序的免费在线制作工具,用户在微容平台上无需编辑代码,可通过拖拽式操作即可完成小程序的制作,真正意义上实现了小程序零代码免费制作! 消除技术门槛:无需代码 ...

  2. 微信小程序分享朋友圈的实现思路与解决办法

    实现思路 那么既然小程序没有分享到朋友圈的api,我们怎么实现分享到朋友圈呢,下面我介绍一下实现思路. 既然没有捷径,那就走复杂一点的路线,那就是需要用户手动分享到朋友圈,问题又来了,用户手动分享的话 ...

  3. 微信小程序零基础制作指南

    第一步 准备工作 下载腾讯官方的微信web开发工具并且安装 第二步 登录已经注册小程序的微信账号并且选择合适的路径新建小程序项目. 新建一个页面文件夹,每一个页面需要一个文件夹,里面包括写逻辑脚本的j ...

  4. 微信小程序canvas 证件照制作

    小程序制作证件照过程 利用canvas制作生活中常用的证件照,压缩图片,修改图片dpi.希望给大家带来方便. 证件照小程序制作要点 上传合适的图片,方便制作证件照 调用AI接口,将图像进行人像分割.这 ...

  5. 微信小程序 使用swiper制作一个滑动导航

    最近在做一个导航的时候,发现使用overflow-x: auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同 这里说下,要用swiper做导航菜单 ...

  6. 微信小程序纯css制作圆形进度条所遇到的问题

    wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox ...

  7. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

  8. 微信小程序制作个人简历

    使用微信小程序云开发制作自己的个人简历,简单高效. 首先需要了解小程序的基本结构以及云开发模式,及一些css样式基础. 使用小程序云数据库.vant组件库实现简历内容. 最终效果如下: 首先申请个人微 ...

  9. 盒马微信小程序

    盒马app刚出现,就吸足了眼球.最近看了看盒马界面,很Q,就想着仿照app写个小程序. 功能介绍 好奇微信小程序是如何制作的,也对盒马app感兴趣,就尝试写了这个盒马小程序.实现了app的部分功能,还 ...

随机推荐

  1. 安装Eclipse Maven插件的方法

    安装IDE Plugins的方法有很多.其一:在线安装,通过Help-->Install New Software的方式,输入HTTP地址来安装,简单易操作,但是也优缺点,就是下载速度慢,或者有 ...

  2. Innodb后台线程

    1.maste thread 负责将缓冲池中的数据异步刷新到磁盘,保证数据的一致性. 2.IO Thread负责IO请求的回调处理.1.0版本之前有4个IO Thread,负责write.read.i ...

  3. 【转】对 Rust 语言的分析

    对 Rust 语言的分析 Rust 是一门最近比较热的语言,有很多人问过我对 Rust 的看法.由于我本人是一个语言专家,实现过几乎所有的语言特性,所以我不认为任何一种语言是新的.任何“新语言”对我来 ...

  4. MySQL中 optimize table '表名'的作用

    语法: optimize table '表名' 一,原始数据 1,数据量 2,存放在硬盘中的表文件大小 3,查看一下索引信息 索引信息中的列的信息说明. Table :表的名称.Non_unique: ...

  5. 基于Docker搭建LNMP环境(转)

    关于什么是docker,建议大家先上网查查有关的用法.如果您不了解,在这篇文章中,您可以简单的理解为他是一个轻量级的虚拟机. 一.docker安装mysql 首先,我们从仓库拉取一个MySql的镜像 ...

  6. jQuery学习笔记(jquery.form插件)

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

  7. Android基础知识之API等级介绍

    原文:http://android.eoe.cn/topic/android_sdk :可以让开发者通过一个表示API级别的整数来描述程序在android平台上的兼容性,系统会将与系统本身提供的API ...

  8. Android基础知识之屏幕兼容模式

    原文:http://android.eoe.cn/topic/android_sdk 注意:如果你在低于安卓3.0的版本上进行应用开发,但其在更大屏幕的设备(比如平板电脑)上显示正常时,你就需要禁用屏 ...

  9. sqlserver自定义函数与存储过程的区别 实例详解

    分享下sql server自定义函数与存储过程的区别,一起来学习下. 一.自定义函数: 1. 可以返回表变量 2. 限制颇多,包括 不能使用output参数: 不能用临时表: 函数内部的操作不能影响到 ...

  10. spring boot下JedisCluster方式连接Redis集群的配置

    最近在使用springboot做项目,使用redis做缓存.在外网开发的时候redis服务器没有使用集群配置,所有就是用了RedisTemplate的方式进行连接redis服务器.但是项目代码挪到内网 ...