6***@qq.com
6***@qq.com
  • 发布:2018-12-22 17:51
  • 更新:2022-02-11 20:56
  • 阅读:1663

【报Bug】setInterval定时器不准的问题

分类:HBuilderX

[内容]

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

2018-12-22 17:51 负责人:无 分享
已邀请:
fjhcpu

fjhcpu

解决了吗?官方Bug?

h***@21cn.com

h***@21cn.com

我 也需要用这个, 可很卡,有别的代替口品吗

该问题目前已经被锁定, 无法添加新回复