//原始代碼
setCollect: Debounce(function() {
//這里防抖 500ms內(nèi)只執(zhí)行最后一次 所以每次都 延遲500ms顯得很卡頓
if (this.isLogin === false) {
toLogin();
} else {
let that = this;
if (this.storeInfo.userCollect) {
//取消收藏-請(qǐng)求網(wǎng)絡(luò)-成功 再改成圖標(biāo)狀態(tài) ↓ 所以會(huì)有網(wǎng)絡(luò)延遲,再次延遲卡頓
collectDel(this.storeInfo.id).then(res => {
that.$set(that.storeInfo, 'userCollect', !that.storeInfo.userCollect);
return that.$util.Tips({
title: res.msg
});
});
} else {
//收藏-請(qǐng)求服務(wù)器- 成功了-再改成圖標(biāo)狀態(tài) ↓ 所以會(huì)有網(wǎng)絡(luò)延遲,再次延遲卡頓
collectAdd(this.storeInfo.id).then(res => {
that.$set(that.storeInfo, 'userCollect', !that.storeInfo.userCollect);
return that.$util.Tips({
title: res.msg
});
});
}
}
}),
//這樣雙重延遲下來 就顯得很卡了
data() {
let that = this;
return {
userCollect: '', //新增每次點(diǎn)擊時(shí)記錄初始收藏狀態(tài)
.......
.......
.......
};
},
//收藏商品-優(yōu)化版
setCollect() {
//未登錄跳轉(zhuǎn)登錄頁
if (this.isLogin === false) return toLogin()
//記錄本次 點(diǎn)擊前, 收藏的初始狀態(tài)(收藏/未收藏), 單位時(shí)間內(nèi)點(diǎn)擊,只記錄一次
if(this.userCollect === '') this.userCollect = this.storeInfo.userCollect
//視覺優(yōu)先 提前立刻改變圖標(biāo)狀態(tài)反饋給用戶 提升用戶體驗(yàn),隨便他亂點(diǎn) 只改變圖標(biāo)狀態(tài)
this.storeInfo.userCollect = !this.storeInfo.userCollect
//振動(dòng)反饋 不需要的話 請(qǐng)注釋
uni.vibrateShort()
this.getCollect()
},
getCollect: Debounce(function() { //防抖放在后面減少請(qǐng)求
let collectStatus = this.storeInfo.userCollect
// 再次減少請(qǐng)求-判斷是否需請(qǐng)求服務(wù)器更新收藏狀態(tài)
//例如客戶本來就是 ‘已收藏’,快速點(diǎn)了n次后 還是 ‘已收藏’
//那么不需要請(qǐng)求服務(wù)器
let whether = this.userCollect !== collectStatus
this.userCollect = '' //清空本次記錄的 初始收藏狀態(tài)
if (whether) {
let id = this.id
//判斷請(qǐng)求接口 收藏/取消收藏
let collectAction = collectStatus ? collectAdd(id) : collectDel(id)
collectAction.then(res => {
return this.$util.Tips({
title: res.msg //成功提示
});
}).catch(err => {
// 網(wǎng)絡(luò)或者服務(wù)器等原因...導(dǎo)致請(qǐng)求失敗,這種情況極少會(huì)發(fā)生
// 前面提前改了圖標(biāo)狀態(tài),如果服務(wù)器端操作失敗,給他再恢復(fù)原來的狀態(tài)即可
this.storeInfo.userCollect = !collectStatus
this.$util.Tips({
title: '操作失敗,請(qǐng)重試', // 失敗提示
});
});
}
}),