[内容]
setInterval定时器问题:
最近在做一个转盘抽奖页面,用定时器去跑马灯,但是定时器一直很慢 定的是100毫秒执行一次 实际1000-2000毫秒左右才会执行一次
于是我在想,是不是定时器里面的代码有阻塞,导致定时器不准的问题,于是我把定时器里面的原有的逻辑代码删除掉,只写了一个普通的定时器 里面啥代码也没有 只有一个console.log('--') 我给的定时是100毫秒执行一次 但是它实际上1-2秒才会执行一次,如果这时候 我退出这个页面的时候定时器没关 这时候再看打印的日志 就恢复正常的100毫秒打印一次了 再次进入页面 就又不行了又会很慢
定时器里面原有的逻辑代码如下:
methods:{
start:function(n){
console.log(n+'---'+this.m)
if(n==5){
this.timer=setInterval(()=>{
console.log('----starting')
if(this.m>7){
this.m=1
}else{
this.m+=1;
}
},100)
}
}
}
重现步骤
[步骤]
在任意页面写一个定时器,每隔100毫秒打印一次日志
[结果]
1000-2000毫秒左右才会打印一次
[期望]
每隔100秒打印一次日志
IDE运行环境说明
[HBuilderX]
[HbuilderX版本号]:1.3.2.20181214
[windows版本号]:Windows10专业版 1803
App运行环境说明
[Android版本号]安卓6 8 9 都有这种情况
[手机型号] 华为、小米
我把整个页面的代码贴出来,可直接运行(图片无关紧要,只是背景,去掉即可)
<template>
<view class="content">
<image src="../../static/jiugongge/jiugongge.png" mode="" style="width: 750upx; height: 1200upx; position: fixed; top: 0; z-index: 0;"></image>
<view class="jiugongge">
<view class="item" v-bind:class="{m1:m==num[n]}" @tap="start(n)" v-for="n in 9" :key='n'>
<text v-if="(num[n])==0">开始</text>
<text v-if="(num[n])!=0">{{num[n]}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data:function(){
return{
m:1,
num:[
1,2,3,8,0,4,7,6,5
],
timer:null
}
},
onShow() {
uni.setNavigationBarColor({
backgroundColor : "#303030",
frontColor : "#ffffff"
})
},
onUnload:function(){
if(this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
methods:{
start:function(n){
console.log(n+'---'+this.m)
if(n==5){
this.timer=setInterval(()=>{
console.log('----starting')
if(this.m>7){
this.m=1
}else{
this.m+=1;
}
},100)
}
}
}
}
</script>
<style>
.m1{
background: #D0D0D0;
transition-duration: 0.6s;
}
.item{
width: 200upx;
height: 200upx;
align-items: center;
justify-content: center;
border: solid 1upx #B69560;
margin-right: 8upx;
margin-left: 8upx;
transition-duration: 0.6s;
}
.jiugongge{
position: absolute;
top: 289upx;
left: 50upx;
z-index: 1;
width:650upx;
height: 660upx;
/* margin-top: 289upx; */
/* border: solid 1px red; */
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content{
width: 100%;
flex-direction: column;
align-items: center;
background: #da001c;
}
</style>
联系方式
[QQ]670999782
附上打印的日志,基本都是1000毫秒往上才会执行一次:
17:43:39.788 ----starting at pages/AD/AD.vue:41
17:43:40.795 ----starting at pages/AD/AD.vue:41
17:43:41.781 ----starting at pages/AD/AD.vue:41
17:43:42.789 ----starting at pages/AD/AD.vue:41
17:43:43.796 ----starting at pages/AD/AD.vue:41
17:43:44.782 ----starting at pages/AD/AD.vue:41
17:43:45.789 ----starting at pages/AD/AD.vue:41
17:43:46.797 ----starting at pages/AD/AD.vue:41
17:43:47.783 ----starting at pages/AD/AD.vue:41
17:43:48.790 ----starting at pages/AD/AD.vue:41
17:43:49.797 ----starting at pages/AD/AD.vue:41
17:43:50.784 ----starting at pages/AD/AD.vue:41
17:43:51.791 ----starting at pages/AD/AD.vue:41
2 个回复
fjhcpu
解决了吗?官方Bug?
h***@21cn.com
我 也需要用这个, 可很卡,有别的代替口品吗