解决小程序频繁setData安卓的问题

小程序写了一个滑动手机屏幕,进度条随着变动,在滑动过程中,touchmove会毫秒级的频繁触发,会影响页面的渲染,安卓手机上进度条不仅会出现一跳一跳的感觉,还会有缓冲,手指滑动动作已经结束,但是进度条还在变化。解决这个的思路就是设置时间间隔,虽然这样进度条也会出现一跳一跳的感觉,但是缓冲的bug会好很多。暂时还没有找到更好的办法,也希望大家能提供更好的思路。
解决小程序频繁setData安卓的问题

//滑动开始事件
  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();
        });
      }
    });
  },