欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法

 更新時(shí)間:2022年08月25日 15:59:04   作者:M?_chen  
計(jì)時(shí)器在日常開(kāi)發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

首先要區(qū)分setInterval和setTimeout

使用場(chǎng)景:

1.一般情況下 setTimeout() 用于延遲執(zhí)行某方法或功能;

2.setInterval() 則一般用于刷新表單,對(duì)于一些表單的假實(shí)時(shí)指定時(shí)間刷新同步。

定義:

1.setInterval() : 用于按照指定的周期(以毫秒計(jì))來(lái)循環(huán)調(diào)用函數(shù)或計(jì)算表達(dá)式,直到 clearInterval() 被調(diào)用或窗口關(guān)閉

2.setTimeout(): 用于在指定毫秒數(shù)后再調(diào)用函數(shù)或者計(jì)算表達(dá)式(以毫秒為單位)

區(qū)別總結(jié):

setTimeout() 方法只運(yùn)行一次,也就是說(shuō)當(dāng)達(dá)到設(shè)定的時(shí)間后就開(kāi)始運(yùn)行指定的代碼,運(yùn)行完后就結(jié)束了,次數(shù)是一次。

setInterval() 是循環(huán)執(zhí)行的,即每達(dá)到指定的時(shí)間間隔就執(zhí)行相應(yīng)的函數(shù)或者表達(dá)式,只要窗口不關(guān)閉或 clearInterval() 調(diào)用就會(huì)無(wú)限循環(huán)下去。

缺點(diǎn)總結(jié):

setInterval缺點(diǎn):

1.使用setInterval時(shí),某些間隔會(huì)被跳過(guò);即使setInterval調(diào)用的方法報(bào)錯(cuò)了,他仍然會(huì)繼續(xù)執(zhí)行。

2.無(wú)視網(wǎng)絡(luò)延遲,可能多個(gè)定時(shí)器會(huì)連續(xù)執(zhí)行

setTimeout缺點(diǎn):

1.不能按時(shí)執(zhí)行

2.執(zhí)行動(dòng)畫(huà)時(shí)它通過(guò)設(shè)定間隔時(shí)間來(lái)不斷改變圖像位置,達(dá)到動(dòng)畫(huà)效果。但是容易出現(xiàn)卡頓、抖動(dòng)的現(xiàn)象,原因是: settimeout 任務(wù)被放入異步隊(duì)列,只有當(dāng)主線(xiàn)程任務(wù)執(zhí)行完后才會(huì)執(zhí)行隊(duì)列中的任務(wù)。

uniapp上使用:

//uniapp中的具體用法:我這里使用到了setInterval
data() {
		return {
			timer: null//定時(shí)器名稱(chēng)
		};
	},
//一般在頁(yè)面需要的地方使用,這里我是放在了onshow()里
onShow() {
	// console.log('onshow');
	 this.timer = setInterval(function() {
		// 放入你自己的業(yè)務(wù)邏輯代碼
 	}, 3000);
},
//uniapp中onHide()能監(jiān)聽(tīng)到頁(yè)面離開(kāi)
onHide() {//離開(kāi)頁(yè)面前清除計(jì)時(shí)器
	// console.log('onHide');
	clearInterval(this.timer);
	this.timer = null;
},

這里我要說(shuō)明一下,在uniapp 中要實(shí)現(xiàn)vue離開(kāi)頁(yè)面銷(xiāo)毀定時(shí)器功能,百度了一大圈都說(shuō)使用vue的beforeDestroy生命周期,如下:

//beforeDestroy為實(shí)例銷(xiāo)毀之前調(diào)用
beforeDestroy() {
		if(this.timer) {
    	clearInterval(this.timer); //關(guān)閉
  	} 

結(jié)果,根本就沒(méi)有用,依然關(guān)不掉,最后看到一個(gè)方法說(shuō)是:通過(guò)$once這個(gè)事件偵聽(tīng)器器在定義完定時(shí)器之后的位置來(lái)清除定時(shí)器,如下:

const timer = setInterval(() =>{ // 某些定時(shí)器操作   }, 500);            

// 通過(guò)$once來(lái)監(jiān)聽(tīng)定時(shí)器,在beforeDestroy鉤子可以被清除。 
uni.$once('beforeDestroy', () => {                     
        clearInterval(timer);                                     
})

顯然,對(duì)我這里并沒(méi)有用,最后還是采用了 onHide()這個(gè)頁(yè)面生命周期才能及時(shí)清除

補(bǔ)充:uni-app 倒計(jì)時(shí)計(jì)時(shí)器

<text class="red">剩余時(shí)間:<text>{{remaining}}</text></text>
export default {
		data() {
			return {
				remaining: '', //顯示剩余時(shí)間
				remainingd: ''  //數(shù)據(jù)返回時(shí)間秒
			}
		},
		onLoad() {
			uni.showLoading(); //數(shù)據(jù)加載中
			this.getmsglist();//第一次加載數(shù)據(jù)
		},
		methods: {
			//獲取列表信息
			getmsglist: function() {
					var _self = this;
				_self.goodsid = uni.getStorageSync('goodsid');
				uni.request({
					url: _self._apiurl + "/app/goods/getgoodsdetail",
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						openid: _self.openid,
						token: _self.token,
					},
					success: (res) => {
						console.log(res);
						var data = res.data;
						_self.remainingd = data.data.timestamp;
						_self.jishiqi();//執(zhí)行一次倒計(jì)時(shí),因?yàn)檫M(jìn)入頁(yè)面有等待
						
						setInterval(function() {
							_self.jishiqi();
						}, 1000)
 
						uni.hideLoading(); //關(guān)閉加載
 
 
					}
				})
			},
			//倒計(jì)時(shí)計(jì)時(shí)器
			jishiqi: function() {
				var dj = this.remainingd;
				if (dj <= 0) {
					this.remaining = "已過(guò)期";
				} else {
					var ddf = this.djs(dj); //格式化過(guò)后的時(shí)間
					this.remaining = ddf;
					//當(dāng)前時(shí)間減去時(shí)間
					dj = dj - 1;
					this.remainingd = dj;
				}
 
			},
			//得到的秒換算成時(shí)分秒
			djs: function(ms) { 
				var h = parseInt(ms / (60 * 60));
				var m = parseInt((ms % (60 * 60)) / 60);
				var s = (ms % (60 * 60)) % 60;
				return h + ":" + m + ":" + s;
			},
		}
	}

總結(jié)

到此這篇關(guān)于uniapp中使用計(jì)時(shí)器setInterval的文章就介紹到這了,更多相關(guān)uniapp使用計(jì)時(shí)器setInterval內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論