작은 프로그램의 코드 동기화 실행 문제 해결

작은 프로그램을 만들 때 다음 두 가지 동기화 문제가 자주 발생합니까?

1. for 루프를 사용하면 한 루프의 작업이 아직 끝나지 않았고 다음 루프가 이미 시작되었습니다. 루프 사이에 상호 의존성이 없다면 문제는 크지 않지만, 다음 루프의 시작이 이전 루프의 결과에 따라 달라지면 그리기와 같은 일련의 작업에 문제가 있을 것입니다:

for (let index in images) {
      //每画一张图，都要在上一张图画结束才能开始，因为要计算画图位置
      ctx.drawImage
}

2. 서버 인터페이스 호출 데이터 액세스, 사진 다운로드 등을 할 때 서버가 아직 데이터를 반환하지 않았고 코드가 계속해서 다른 코드를 실행하여 분명히 문제를 일으킬 것입니다.

wx.downloadFile({
      url: URL,
      success(wr) {
      //如果其他执行代码在success代码块里面，还能保证在成功获取数据后正常执行
      //如果下载功能是共用的，其他操作逻辑肯定就会抽离出来，这样就保证不了同步执行了。
      }
});

어떻게 해결하나요?
첫 번째 경우에는 인터넷에 있는 많은 솔루션이 동기화 또는 대기를 추가하는 것이며 일부는 setInterval을 추가하는 것입니다. 저는 이러한 솔루션을 선택하지 않고 중첩 호출을 사용했습니다.

/**
   * 处理图片
   */
  handleOneImage: function(ctx, images, idx) {
    let that = this;
    let oneImage = images[idx];
    let pro = new Promise(function(resolve, reject) {
      if (oneImage == undefined) {
        //画图结束
        //执行一系列操作
      } else {
        //成功画图结束，执行下一张图的操作
        that.drawOneImage(ctx, oneImage, that.data.xp).then(isSuccess => {
          if (isSuccess == 'success') {
            that.handleOneImage(ctx, images, idx + 1);
          }
        });
      }
    });
    return pro;
  },
  /**
   * 画图片
   */
  drawOneImage: function(ctx, image, xp) {
    let that = this;
    //保证获取图片信息、画图等操作同步进行结束再返回结果
    let pro = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: image,
        success: function(imageInfo) {
          let iWidth = imageInfo.width;
          let iHeight = imageInfo.height;
          let dWidth = (iWidth * 580) / iHeight;
          ctx.drawImage(image, xp, 0, dWidth, 580);
          ctx.stroke();
          that.setData({
            xp: that.data.xp + dWidth
          });
          resolve('success');
        }
      });
    });
    return pro;
  },

두 번째 사례: 실제로 첫 번째 사례를 해결하는 코드는 두 번째 사례를 해결하는 데에도 사용됩니다. 필요한 경우 위 코드를 연구할 수 있습니다.

이 솔루션은 Xiaocheng의 이름이 Tu Zuo Yao인 작은 프로그램의 코드 조각이기도 합니다. 누구나 시도해 볼 수 있는 작고 아름다운 그림입니다.

추천 튜토리얼: "WeChat 미니 프로그램"

위 내용은 작은 프로그램의 코드 동기화 실행 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!