找人做網(wǎng)站需要注意什么跨境電商靠譜嗎
前言：????????
? ? ? ? 今天實現(xiàn)一個小小的優(yōu)化，業(yè)務(wù)上是后端需要從設(shè)備上拿數(shù)據(jù)，所以前端需要不斷調(diào)用一個查詢接口，直到后端數(shù)據(jù)獲取完畢，前后端根據(jù)一個ending字段為true判斷停止調(diào)用查詢接口。由于這個查詢時間比較久，所以需要一個laoding效果。
優(yōu)化：前端除了根據(jù)后端返回的ending字段判斷停止調(diào)用查詢接口以外，還會給出一個30秒的兜底時間，也就是說30秒之后如果ending字段依舊是false，前端就認為查詢超時，停止loading和調(diào)用接口，而且想把這個30秒的時間放在loading上，可以更好的告訴用戶需要等待最長大概30秒左右。
突然感覺前面廢話有點多，因為可能是剛寫好所以有點激動。
簡單講就是實現(xiàn)一個loading伴隨著倒計時時間結(jié)束而停止的一個效果，效果如下：
el-loading倒計時
然后直接上代碼，我一般習(xí)慣在HBuilder上先寫一個小的demo來測試一下，如果ok了，再在項目中去實現(xiàn)，以下代碼是可以直接使用的，效果就是上面的視頻了（你們喜歡復(fù)制粘貼，我懂得，我也是CV工程師）：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body><div id="app" ><el-button @click="clickButton" v-loading.fullscreen.lock="fullscreenLoading" :element-loading-text=`${time}秒后返回`>Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog></div>
</body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: function() {return { time:4,fullscreenLoading:false,visible: false,data: [{id: 1,label: '一級 1',children: [{id: 4,label: '二級 1-1',children: [{id: 9,label: '三級 1-1-1'}, {id: 10,label: '三級 1-1-2'}]}]}, {id: 2,label: '一級 2',children: [{id: 5,label: '二級 2-1'}, {id: 6,label: '二級 2-2'}]}, {id: 3,label: '一級 3',children: [{id: 7,label: '二級 3-1'}, {id: 8,label: '二級 3-2'}]}],defaultProps: {children: 'children',label: 'label'}}},methods:{clickButton(){this.fullscreenLoading = true;// setTimeout(() => {// this.fullscreenLoading = false;// }, 2000);const timer = setInterval(() => {console.log(123,this,this.$loading,this.time) this.time = this.time -1;// time為0的時候就關(guān)閉loadingif (this.time === 0) {clearInterval(timer);this.fullscreenLoading = false;}}, 1000);//恢復(fù)初始值 this.time = 4}}})</script>
</html>?我覺得代碼大家都能看懂，起碼前端的明白就OK了。
（1）主要就是el-loading和setInterval定時調(diào)用的一個配合使用，
（2）就是element-loading-text也可以動態(tài)綁定變量去做出數(shù)據(jù)的響應(yīng)式的變化
對，大概是這么個思路。具體的話各位可以再根據(jù)實際業(yè)務(wù)去添加邏輯。我的這個業(yè)務(wù)場景主要是因為去拿數(shù)據(jù)時間比較長，一般的請求很快回來的數(shù)據(jù)不必添加倒計時，也就是一瞬間的的事情。