无线循环计时器 setInterval
javaScript
复制代码
//创建定时器 该定时器必须手动取消否则会造成泄漏一直存在
let time = setInterval(() => {
Array.from(this.list).forEach((item)=>{
item.title +=1
})
}, 2000)
//取消定时器
clearInterval(time)
//可以在页面销毁回调进行取消 注意let 标识局部变量 这边取消需要定义为 var
export default {beforeDestroy() {
clearInterval(this.time)
}
}
倒计时 setTimeOut 只执行一次
javaScript
复制代码
setTimeout(()=>{//到期后执行
Array.from(this.list).forEach((item)=>{
item.title +=1
})
},2000)
示例
html
复制代码
<template>
<view>
<view>
</view>
<view class="line" v-for="(item,i) in list" :key="i" @click="itemClick(key)">
<image class="imageStype" src="../../static/logo.png"></image>
<text class="textHellow">{{item.title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
title: 0
}, {
title: 1
}, {
title: 2
}]
}
},
methods: {
itemClick(ii) {
// setInterval(() => {
// Array.from(this.list).forEach((item)=>{
// item.title +=1
// })
// }, 2000)
setTimeout(()=>{
Array.from(this.list).forEach((item)=>{
item.title +=1
})
},2000)
}
}
}
</script>
<style>
.imageStype {
width: 120rpx;
height: 120rpx;
margin-left: 40rpx;
}
.line {
margin-top: 20rpx;
display: flex;
flex-direction: row;
padding-top: 40rpx;
padding-bottom: 40rpx;
width: 670rpx;
margin-left: 40rpx;
border: 2rpx solid gray;
border-radius: 16rpx;
background-color: aliceblue;
box-shadow: 8rpx 8rpx 4rpx 0 gray;
}
.textHellow {
margin-left: 20rpx;
font-weight: bold;
font-size: 32rpx;
}
</style>
大致效果 列表点击后过2秒 标题数值变化
