微信小程序setinterval_简单谈谈setTimeout与setInterval
感谢踩过的坑
sf社区的第一篇文章。
最近在做一个拍卖的微信小程序,用到了定时器setTimout和setInterval,简单谈谈这两个api。
setTimeout
最常见的用法就是第二种(第三种mdn文档不推荐),如:
var timeoutId = setTimeout(function() {
console.log('hello world!')
},1000)
定时器是先等待1000ms再执行function的语句,而不是一开始就执行然后再等待。如果执行的语句需要用到this引用,需要在回调函数function上绑定this:function() {...}.bind(this),把this传给回调函数,同作为该回调函数的this,使回调函数内外this的指向保持一致。或者用es6的箭头函数() => {},也能起到同样的作用。bind的用法详见Function.prototype.bind()
用完定时器之后,要记得清除:clearTimeout(timeoutId) 这里的timeoutId是setTimeout返回的一个正整数编号,是定时器的唯一标识符。
setInterval
在我看来基本上可以当成setTimeout的升级版,就像setTimeout循环调用自身,用法也跟setTimeout一样,用完是也要记得用clearInterval清掉定时器。底层原理或许会有些不同,这里就不深究。
下面是我在微信小程序倒计时组件:
// components/countdown.js
/**
* 倒计时组件
*/
Component({
/**
* 组件的属性列表
*/
properties: {
durationInit: {
type: Number,
value: 0,
observer: function(newVal) { //监控duration初始值变动(看有没有外部传入新的时间)
this.initDuration(newVal)
}
}
},
/**
* 组件的初始数据
*/
data: {
duration: 0, //剩余时间,单位秒
timeDisplay: '' //展示时间
},
intervalId: null, //计时器Id,不需要渲染,放外面,免得影响性能
/**
* 组件销毁了要清除计时
*/
detached() {
this.stopInterval(this.intervalId)
},
/**
* 组件的方法列表
*/
methods: {
// 设置时间
setTime: function(duration) {
if (duration <= 0) {
this.setData({
timeDisplay: `活动结束啦`
})
//this.data.timeDisplay = `活动结束啦,戳这里看看好东西~`
return false
}
var s = this.formatTime(duration % 60)
var m = this.formatTime(Math.floor(duration / 60) % 60)
var h = this.formatTime(Math.floor(duration / 3600) % 24)
var d = this.formatTime(Math.floor(duration / 3600 / 24))
var time = `${d}:${h}:${m}:${s}`
//写入
this.setData({
timeDisplay: time
})
return true
},
//倒计时
countDown: function(duration) {
//有没有倒计时的必要.第一次展示时间(这个很重要)
var canCountDown = this.setTime(duration)
if (canCountDown === true) {
var intervalId = setInterval(
function() {
//清除计时器
if (this.data.duration <= 0) {
this.stopInterval(intervalId)
}
this.setData({
duration: this.data.duration - 1
})
this.setTime(this.data.duration)
}.bind(this),
1000
)
this.intervalId = intervalId
}
},
//初始化剩余时间
initDuration: function(newVal) {
if (this.intervalId) {
//若有计时器,清除
this.stopInterval(this.intervalId)
}
this.setData({
duration: this.data.durationInit
})
this.countDown(newVal)
},
//清除计时器
stopInterval: function(intervalId) {
if (intervalId != null) {
clearInterval(intervalId)
this.intervalId = null
}
},
//格式化时间
formatTime(time) {
return time < 10 ? `0${time}` : `${time}`
}
}
})
最后想吐槽一下W3School,随着学习的深入,发现W3School的坑真多,强烈建议不要看W3School学前端,要看MDN文档。可能很多人的前端启蒙就是W3School,我也是。名字跟W3C很像,还以为是非常专业的网站,然而后来发现跟W3C并没有什么关系。W3School在baidu搜索排名非常高,被坑了,baidu也是同谋。现在早已拥抱google,清爽!
下面就拿setInterval的说明做例子,对比一下MDN和W3School,就知道后者有多坑了。
通过上面3张图片,可以看出
1. W3School含糊其辞,解释不清楚,不详细。用的时候容易出问题
W3School:周期性执行...请告诉我如果先执行了回调函数,再等待1秒,再执行回调函数,这算不算得上周期性??
MDN:详细指出函数的每次调用会在该延迟之后发生
2. 不推荐的用法没有指出,文档更新慢,权威性极低
W3School:连举的例子都是不推荐的用法,用code代码串。。。
MDN:详细指出使用code不推荐,不仅如此,还发散性指出原因和eval()一样,真的很贴心很友好了
以上图片均来源于MDN和W3School
在最后,感谢踩过的坑,让我成长!初来乍到,多多关照,希望能坚持写技术博文。
微信小程序setinterval_简单谈谈setTimeout与setInterval相关推荐
- 【微信小程序系列】微信小程序超简单教程,基本语法,获取用户基本数据信息,实现对云数据库的增删改查及小程序外部api的引用示例(附源码)
[微信小程序系列]微信小程序超简单教程 小程序项目结构 静态页面的构成 HTML:结构 css:样式 js:行为 小程序 页面全部存放在pages, 而且pages目录只能存放页面 页面包括4个文件, ...
- 微信小程序最简单的轮播图
小程序轮播图 今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码 基本属性介绍 <!-- indic ...
- 微信小程序:简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码 内包含了N种模板制作,另外并有大分类 另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了 而且流量主还不是单一种: Banner 激励视频 视频广告 多格子广告 横 ...
- 微信小程序canvas简单使用
微信小程序canvas简单使用 index.wxml文件 index.js文件 效果图 index.wxml文件 <canvas type="2d" id="can ...
- 微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息 在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
- 微信小程序制作简单的商品列表页,实现价格求和
微信小程序制作简单的商品列表页,实现价格求和 准备工作 1.node.js 2.微信开发者工具 目录结构 客户端代码实现 index.wxml <view class="contain ...
- 微信小程序的简单介绍
微信小程序的简单介绍 1.与HTML的区别 HTML 微信小程序 <div></div> <view></view> <h1></h1 ...
- 微信小程序设置简单的监听器(转载)
微信小程序设置简单的监听器 创建一个watch.js文件 /*** 设置监听器 watch.js*/ export function setWatcher(page) {let data = page ...
- 微信小程序抽奖 简单功能实现
抽奖是一种常见的互动活动,在微信小程序中也有很多不同的实现方式.以下是一份简单的微信小程序抽奖源码,供参考:在 wxml 文件中添加抽奖的页面布局: <view class="cont ...
最新文章
- GoAccess安装及分析nginx实时日志
- IJCAI 2018 基于主题信息的神经网络作文生成模型
- 想拿下互联网大厂OFFER,都需要准备什么?
- JavaParser中AST节点的观察者
- 优秀的云存储解决方案Dropbox,现在注册就有2G
- Maven多模块项目搭建
- linux kernel峰会视频,2010 年 Linux 内核峰会,11月美国
- js 对象及空对象或数组及空数组的判断与比较
- SpringBoot中.properties文件中配置项显示到页面中文乱码解决
- 文件与目录的默认权限与隐藏权限
- java实现ppt转图片、ppt转pdf
- 图像超分辨去噪(去雨雾)
- 扫描探针显微术入门(4)
- Verilog时钟n分频
- ASP.NET 安全认证(如何运用 Form 表单认证)(转帖)
- wps2016向程序发送命令_word文档打开,提示“向程序发送命令时出现问题”的原因...
- 《曹云社》论道中国企业管理 剖析八家企业落地中台实践
- mysql按周几查询时间戳转周几星期
- 输出三角形,平行四边形,菱形
- Android MediaPlayer控制进度播放音频
热门文章
- Flowable通过api查询流程返回流程图节点
- 小程序开发(1)-之目录结构和文件说明
- Java-数组 三种初始化及内存分析
- BugkuCTF-WEB题好像需要密码
- C语言实现静态顺序表
- 景点门票销售系统系统java_某景点门票销售管理系统
- mybatis连接oracle12乱码,使用mybatis链接oracle数据库出现账号密码错误解决
- mysql general clomun_关于MySQL索引index杂谈
- oracle 如何形成死锁,Oracle数据表中的死锁情况解决方法
- 涡轮机叶片matlab强度分析论文,一种基于MATLAB及Pro_E的涡轮建模方法