小さなプログラムにおけるコード同期実行の問題を解決する

小さなプログラムを作成するとき、次の 2 つの同期の問題がよく発生します:

1. for ループを使用するとき、1 つのループ内の操作がまだ終了しておらず、次のループがすでに開始されています。ループ間に相互依存性がない場合は、大きな問題は発生しませんが、次のループの開始が前のループの結果に依存している場合、描画などの一連の操作に問題が発生します。

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

2 . データにアクセスしたり、画像をダウンロードしたりするためにサーバー インターフェイスを呼び出しますが、サーバーはデータを返さず、コードは他のコードを実行し続けます。これは明らかに問題を引き起こします。

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

どうすれば解決できますか?

最初のケースでは、インターネット上の多くのソリューションは sync または await を追加するもので、一部には 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;
  },

2 番目のケース: 実際、最初のケースを解決するコードは 2 番目のケースの解決にも使用されます。必要に応じて Promise を使用して上記のコードを検討できます。

これらのソリューションも、私の小さなプログラムのコード スニペットです。Xiaocheng の名前は Tu Zuo Yao です。画像の合成と切り取りを行う小さくて美しい小さなプログラムです。ぜひ試してみてください。

推奨チュートリアル: 「

WeChat ミニ プログラム 」

以上が小さなプログラムにおけるコード同期実行の問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。