解决小程序频繁setData安卓的问题
小程序写了一个滑动手机屏幕,进度条随着变动,在滑动过程中,touchmove会毫秒级的频繁触发,会影响页面的渲染,安卓手机上进度条不仅会出现一跳一跳的感觉,还会有缓冲,手指滑动动作已经结束,但是进度条还在变化。解决这个的思路就是设置时间间隔,虽然这样进度条也会出现一跳一跳的感觉,但是缓冲的bug会好很多。暂时还没有找到更好的办法,也希望大家能提供更好的思路。
//滑动开始事件
handletouchtart: function(event) {
console.log('滑动开始')
const that = this;
this.data.lastX = event.touches[0].pageX
this.data.lastY = event.touches[0].pageY
function time() {
that.setData({
time: that.data.time + 1,
move: true
}, () => {
async function sendData() {
try{
console.log('异步'+that.data.time)
that.sendDataFn("lightLevel", that.data.lightLevel);
that.sendDataFn("hotLevel", that.data.hotLevel);
}catch(err){
console.log(err);
}
}
sendData();
});
};
interval = setInterval(time, 200);
},
//滑动移动事件
handletouchmove: function(event) {
// 如果两次touchmove时间的时间间隔小于50ms,就直接return,不会触发setData;
let newTime = event.timeStamp;
let diffTime = newTime - timeStamp;
console.log('diffTime', diffTime);
if (diffTime<50){
return;
}else{
timeStamp = newTime;
}
let currentX = event.touches[0].pageX
let currentY = event.touches[0].pageY
let tx = currentX - this.data.lastX
let ty = currentY - this.data.lastY
//将当前坐标进行保存以进行下一次计算
this.data.lastX = currentX
this.data.lastY = currentY
// 因为此方法会频繁触发,所以要判断条件,避免不必要的setData
if (this.data.lightbrightState || this.data.warmlightState || this.data.moonlightState || this.data.delayshutdownState){
this.setData({
lightbrightState: false, // 明亮模式关闭
warmlightState: false, // 温馨模式关闭
moonlightState: false, // 夜灯模式关闭
delayshutdownState: false, // 延迟关灯模式关闭
})
}
if (!this.data.lightOn) {
console.log('开灯');
this.setData({
lightOn: true,
}, () => {
// 发送开灯指令
this.sendDataFn("lightOnOff", 1);
});
}
//左右方向滑动
if (Math.abs(tx) > Math.abs(ty)) {
let diffX = this.data.tempValue + tx;
if (diffX <= 0) {
diffX = 0
} else if (diffX >= 100) {
diffX = 100
}
let diffXVlaue = (100 - diffX) * 0.01;
if (diffXVlaue >= 1) {
diffXVlaue = 1
} else if (diffXVlaue <= 0) {
diffXVlaue = 0
}
this.setData({
tempValue: diffX,
yellowOpacity: diffXVlaue,
hotLevel: diffXVlaue,
});
}
//上下方向滑动
else {
let diffY = this.data.brightValue - ty;
if (diffY <= 0) {
diffY = 0
} else if (diffY >= 100) {
diffY = 100
}
let diffYVlaue = diffY * 0.01;
if (diffYVlaue >= 1) {
diffYVlaue = 1
} else if (diffYVlaue <= 0) {
diffYVlaue = 0
}
this.setData({
brightValue: diffY,
lightLevel: diffYVlaue,
whiteOpacity: diffYVlaue,
});
}
},
//滑动结束事件
handletouchend: function(event) {
console.log('滑动结束')
this.setData({
time: 0
}, () => {
// debugger;
clearInterval(interval);
if (this.data.move) {
this.setData({
move: false
}, () => {
async function sendData() {
try {
console.log('滑动结束异步')
this.sendDataFn("lightLevel", that.data.lightLevel);
this.sendDataFn("hotLevel", that.data.hotLevel);
} catch (err) {
console.log(err);
}
}
sendData();
});
}
});
},