uniapp 常用定时器实现方式

本文介绍: uniapp 实现定时器的2种方式

无线循环计时器 setInterval

 //创建定时器  该定时器必须手动取消否则会造成泄漏一直存在
 let time = setInterval(() => {
					Array.from(this.list).forEach((item)=>{
						item.title +=1 
					})
				}, 2000)
 //取消定时器				
	clearInterval(time)
	
	
	//可以在页面销毁回调进行取消 注意let 标识局部变量 这边取消需要定义为 var 
	export default {beforeDestroy() {
			    clearInterval(this.time)
	    	}
		}

倒计时 setTimeOut 只执行一次

setTimeout(()=>{//到期后执行
					Array.from(this.list).forEach((item)=>{
											item.title +=1 
										})
				},2000)

示例

<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>