分类: 微信小程序

小程序使用回调函数来解决异步执行问题

[ 2022-12-09 09:34:19 | 作者: admin ]
字号: 大 | 中 | 小
p.s. 异步执行问题：第一个函数没有执行完就执行第二个函数的问题

实际使用中，回调函数用可以匿名，也可以命名然后单独写在一个函数中。还可以将page页的this传递给主函数，然后主函数能通过这个page的this调用page页的参数和函数做一些复杂点的操作。当然page相关的最好还是放到回调函数里面进行更清晰。


在JavaScript中，回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。

当需要使用回调函数时，需要预先定义一个函数体。而回调函数通常只是提供给其它模块进行调用，为了简化编码，javascript等脚本语言中提供了对匿名函数的支持。

回调函数的使用场合：资源加载（如动态加载js文件后执行回调，加载iframe后执行回调，ajax操作回调，图片加载完成执行回调，AJAX等）。

回调函数的传递：要将函数引用或者函数表达式作为参数传递


最好保证回调存在且必须是函数引用或者函数表达式：
(callback && typeof(callback) === "function") && callback(res);

也就是微信小程序官方demo以及很多代码中会在函数中经常出现 typeof cb == “function” && cb(that.globalData.userInfo)一句。代码本身的含义是，判断cb是不是函数类型同时将一个参数传入名为cb的函数下。

以下是官方demo的app.js中获取用户信息的函数定义
getUserInfo:function(cb){
         var that = this
         if(this.globalData.userInfo){
             typeof cb == "function" && cb(this.globalData.userInfo)
         }else{
             //调用登录接口
             wx.login({
                success: function () {
                    wx.getUserInfo({
                     success: function (res) {
                     that.globalData.userInfo = res.userInfo
                     typeof cb == "function" && cb(that.globalData.userInfo)
                     }
                    })
                }
             })
         }
},


以下是在index.js中的onLoad函数的代码
onLoad: function () {
         console.log(‘onLoad函数开始执行’)
         var that = this
         //调用应用实例的方法获取全局数据
         app.getUserInfo(function(userInfo){
                //更新数据
                that.setData({
                     userInfo:userInfo
                })
                console.log(‘用户数据存入当前页面’);
         })
}


解释：

        在getUserInfo的方法定义中，接收了名为cb的参数，使用时机就是在拿到用户信息的时候，如果这个cb类型为函数就执行名为cb这个函数。（即在调用wx.login时，传递了一个匿名函数进行调用成功后的逻辑处理，就是success后面的部分。可以看到这里只有函数定义而没有函数名称，因此除了作为回调函数外，也无法在其它地方调用该函数）
        再看函数调用，在index.js的onLoad方法中调用了这个函数并定义了一函数作为参数，函数的内容就是将传入的userInfo设置在当前页面的数据中。


执行步骤：

        当进入到index页面时首先会调用onLoad函数，然后会执行app.getUserInfo()函数(输出可以先忽略)

        在getUserInfo()函数中会先判断是本地是否保存有用户信息，第一次执行的时候肯定没有走else，执行登录方法，拿到用户信息然后执行typeof cb == “function” && cb(that.globalData.userInfo) 执行作为参数的函数的方法

        然后是用户信息获取成功，app.getUserInfo()函数会输出用户信息存入当前页面



原文链接：https://blog.csdn.net/liuliuhelingdao/article/details/127470396
[最后修改由 admin， 于 2022-12-09 09:46:36]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2894

这篇日志没有评论。

此日志不可发表评论。