谢谢踩过的坑
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