Résoudre le problème de l'exécution de la synchronisation du code dans les petits programmes

Lorsque vous créez de petits programmes, rencontrez-vous souvent ces deux problèmes de synchronisation :

1. Lorsque vous utilisez une boucle for, l'opération dans une boucle n'est pas encore terminée et la boucle suivante a déjà commencé. S'il n'y a pas d'interdépendance entre les boucles, le problème ne devrait pas être grave, mais si le début de la boucle suivante dépend du résultat de la boucle précédente, alors il y aura des problèmes avec cette série d'opérations, comme dessiner :

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

2 .Appelez l'interface du serveur pour accéder aux données, télécharger des images, etc., mais le serveur n'a pas renvoyé les données et le code a continué à exécuter d'autres codes, ce qui posera évidemment des problèmes.

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

Comment le résoudre ?
Dans le premier cas, de nombreuses solutions sur Internet consistent à ajouter sync ou wait, et certaines ajoutent setInterval. Je n'ai choisi aucune de ces solutions et j'ai utilisé des appels imbriqués.

/**
   * 处理图片
   */
  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;
  },

Deuxième cas : En fait, le code pour résoudre le premier cas est également utilisé pour résoudre le deuxième cas. Utilisez Promise Si nécessaire, vous pouvez étudier le code ci-dessus.

Ces solutions sont également des extraits de code d'un de mes petits programmes qui s'appelle Tu Zuo Yao. Il s'agit d'une petite et belle applet de synthèse et de découpage d'images.

Tutoriel recommandé : "Mini programme WeChat"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!