动态渲染数据，实现界面批次添加数据

1.由于后端数据返回量太大，一次渲染会导致页面卡顿，于是想到利用window自带方法renderOptimization，cancelAnimationFrame来解决

1.先将后端返回得数据切割成10个一份得数组

    averageFn(arrList) {
      let i = 0;
      let result = [];
      while (i < arrList.length) {
        result.push(arrList.slice(i, i + 10));
        i = i + 10;
      }
      return result;
    },

2.创建添加数据方法

    renderOptimization(dataList, data, handlerId) {
      let twoArrayList = this.averageFn(dataList);
      console.log(twoArrayList);
      const renderFuc = currentIndex => {
        if (currentIndex > twoArrayList.length - 1) {
          cancelAnimationFrame(this.handlerId);
          return;
        }
        console.log(this[data]);
        this[handlerId] = requestAnimationFrame(() => {
          this[data] = [...this[data], ...twoArrayList[currentIndex]];
          currentIndex = currentIndex + 1;
          renderFuc(currentIndex);
        });
      };
      renderFuc(0);
    },

3.在调取后端数据时进行引用

    // 可选食材列表 (右边) 列表
    selectaiconfigfoodApi() {
      this.loadingRight = true;
      this.rightdata = [];
//如果正在动画执行中时调用函数，清除动画
      if (this.rightHanderId) {
        cancelAnimationFrame(this.rightHanderId);
      }
      return new Promise(resolve => {
        selectaiconfigfood({
          foodClassName: this.typeName == "全部" ? "" : this.typeName,
          foodName: this.rightFoodName
        }).then(res => {
          this.loadingRight = false;
          if (res.retCode == 2000) {
            this.rightDataList = res.data.records || res.data;
            this.rightDataLength = res.data.records.length;
            this.renderOptimization(
              res.data.records || res.data,
              "rightdata",
              "rightHanderId"
            );
            resolve();
          }
        });
      });
    },