`

小程序,解决代码同步执行问题

阅读更多

在做小程序的时候,是不是经常遇到这两种同步问题:

1.使用for循环,一个循环里面的操作还没结束,下一个循环就已经开始了。如果循环之间没有互相依赖,问题应该还不大,但是如果下一个循环的开始依赖于上一个循环的结果,那这一系列操作就会出现问题,比如画图:
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;
  },

 第二种情况:其实在解决第一种情况的代码中,也用到了解决第二种情况的代码,使用Promise,有需要的话可以研究下上面的代码。

这些解决方案也是我的一个小程序里面的代码片段,小程名字叫图作妖,一个小而美的图片合成、剪切小程序,欢迎大家体验。

 

分享到:
评论

相关推荐

    小程序源代码

    小程序源代码是微信平台开发的一款轻量级应用的编程基础,它采用了一种特定的编程语言——WXML(微信小程序标记语言)和WXSS(微信小程序样式语言),结合JavaScript进行功能实现。对于初学者而言,深入理解小程序源...

    微信小程序全套源代码(后台、小程序php)(源码)源代码.zip

    开发微信小程序时,会用到微信官方提供的开发者工具,它支持代码编辑、模拟器预览、真机调试等功能,帮助开发者快速定位和解决问题。源代码中可能包含了配置文件,如app.json和project.config.json,它们定义了小...

    小程序官方示例代码

    通过深入研究这个官方示例代码,开发者不仅可以掌握小程序的基本开发技能,还能了解到最佳实践和常见问题的解决方案。对于初学者,这是一个极好的起点;对于有经验的开发者,它提供了一个验证和扩展自己知识的平台。

    微信小程序按顺序同步执行的两种方式

    本文将探讨两种在微信小程序中实现同步执行的方法:回调函数和async/await。 1. 回调函数执行: 在早期的JavaScript编程中,回调函数是处理异步操作的主要方式。在微信小程序中,我们可以将后一个方法放入前一个...

    微信小程序异步API同步化研究.pdf

    为了解决这些问题,本文提出了微信小程序异步API同步化的研究。同步化是一种将异步操作转变成同步操作的技术手段,让开发者可以在一个同步的流程中处理原本异步的操作。通过同步化处理,开发者可以像处理同步代码...

    一些jAVA的做的小程序的代码

    这个压缩包文件中的"一些JAVA的做的小程序的代码"显然包含了多个使用Java编写的实用小程序的源代码。源代码是程序员用来理解和修改软件的原始指令,这对于学习、调试或改进现有程序至关重要。 这些Java小程序可能...

    微信小程序-笑话集(完整带后台)小程序源码

    本项目是“微信小程序-笑话集(完整带后台)”的小程序源码,提供了从前端界面到后端数据管理的全套解决方案,非常适合学习微信小程序开发以及构建类似内容分享应用。 首先,我们来看“JSJoke-master”这个文件夹名...

    120个微信小程序源代码

    通过研究这120个微信小程序源代码,开发者不仅可以掌握上述技术点,还能了解到实际项目中的最佳实践和常见问题解决方案。同时,对于想要提高小程序开发能力的人来说,这是一个绝佳的学习资源,可以借鉴其中的设计...

    32个实用微信小程序源代码

    通过学习这32个不同种类的微信小程序源代码,开发者不仅可以掌握小程序的基本开发技术,还能了解到各种实际应用场景的解决方案,对提升开发技能和解决实际问题能力大有裨益。无论是初学者还是经验丰富的开发者,都能...

    微信小程序的全局状态同步管理库

    微信小程序的全局状态同步管理库是开发者在构建微信小程序应用时,为了更高效、有序地管理应用程序中的共享状态而设计的一种解决方案。在小程序的开发过程中,随着应用复杂性的增加,多个页面之间共享状态的管理变得...

    站长做站的文件对比,代码对比小程序。

    标题中的"站长做站的文件对比,代码对比小程序"指的是一个专为网站管理员设计的小型应用程序,用于快速、便捷地比较网站文件或源代码的差异。这种工具对于版本控制、问题排查、更新跟踪等工作场景非常有用。 描述中...

    [原创]键盘状态提示小程序源代码

    这个小程序能够显示大小写锁定(Caps Lock)和数字锁定(Num Lock)键是否开启,这对于某些在黑暗环境下使用键盘或不习惯观察键盘指示灯的用户来说非常实用。 在编程领域,这种应用通常涉及到以下几个关键知识点: ...

    微信小程序源码电影购票小程序

    【微信小程序】 微信小程序是腾讯公司推出的一种轻量...通过深入学习和实践这个“微信小程序源码电影购票小程序”,开发者不仅能提升在微信小程序开发方面的技能,还能了解到实际项目开发中的问题解决策略和最佳实践。

    微信小程序项目源码云开发cloudtest.zip

    云开发(CloudBase)是微信小程序提供的一种后端服务解决方案,它允许开发者在无需运维基础架构的情况下,便捷地进行数据存储、云函数执行以及文件托管等操作。在这个"微信小程序项目源码云开发cloudtest.zip"压缩包...

    200个java初学者必看的小程序

    Java编程语言是软件开发领域广泛使用的工具,尤其对于初学者来说,它提供了丰富的...建议按照顺序逐步学习,每完成一个小程序都要自己动手尝试,遇到问题时查阅文档或在线求助,这样可以巩固知识,提高解决问题的能力。

    菜谱展示小程序源码分享(包括:菜谱图片展示、内容展示、监控计划)

    例如,用户可以设置特定的菜谱计划,小程序会通过本地存储或云端同步来保存并提醒用户执行。此外,通过分析用户的浏览历史和收藏行为,源码可能还集成了个性化推荐算法,为用户推荐符合其口味的菜谱。 四、其他技术...

    五个多线程同步应用小程序

    这些小程序可以用来学习和理解如何在实际项目中有效地利用这些同步工具,避免死锁、竞态条件等并发问题。通过分析和运行这些小程序,开发者可以更深入地掌握多线程同步的原理和实践技巧。 总的来说,Monitor、Mutex...

    小程序开发入门.pdf

    4. **数据绑定和状态管理**:在小程序中,数据绑定是通过JSON对象进行的,可以实现视图和数据的实时同步。状态管理对于大型小程序尤为重要,合理组织和管理全局状态能有效提高代码可维护性。 5. **组件化开发**:小...

    黄色微信小游戏石头剪刀布猜拳游戏小程序源码.zip

    5. **数据存储与同步**:虽然这款小游戏可能不需要复杂的数据库支持,但可能会涉及到一些简单的用户数据存储,比如记录历史战绩,这可能需要用到微信小程序的本地缓存或微信云服务。 6. **性能优化**:对于小游戏,...

    毕业设计 微信小程序设计 小程序模板【截图+源码】 悦读神器

    3. **数据绑定**:微信小程序采用双向数据绑定,使得视图层和逻辑层可以实时同步,降低了开发者维护界面状态的复杂度。数据模型的变化会自动反映到视图上,反之亦然。 4. **组件化开发**:微信小程序提供了丰富的...

Global site tag (gtag.js) - Google Analytics