2 weixin 41542494 weixin_41542494 于 2018.01.10 19:45 提问

小程序 點擊事件如何觸發回調函數

我下拉有觸發回調函數 但是點擊 我沒有用過 希望大大 能提供一下 有哪些方法 可以在點擊後觸發回調函數
或著是要自己寫?

11个回答

dabocaiqq
dabocaiqq   2018.01.10 19:47
已采纳

你可以调用下,传入函数,传入参数,都回调

weixin_41542494
weixin_41542494 我已經實現了 你貼了那麼多...真的很感謝你 我改用你說的 傳參 謝謝
5 个月之前 回复
dabocaiqq
dabocaiqq 回复再穷不能穷山东思密达: 你怎么回答到我这里来了
5 个月之前 回复
zqbnqsdsmd
zqbnqsdsmd 这个你可以使用js脚本和小程序的技术的。你采纳了我的回答,我可以写给你。不采纳的话,我只能说这么多了。 good luck
5 个月之前 回复
devmiao
devmiao   Ds   Rxr 2018.01.10 19:48
zqbnqsdsmd
zqbnqsdsmd   2018.01.10 19:48

这个你可以使用js脚本和小程序的技术的。你采纳了我的回答,我可以写给你。不采纳的话,我只能说这么多了。 good luck

dabocaiqq
dabocaiqq   2018.01.10 19:49
dabocaiqq
dabocaiqq   2018.01.10 19:49
dabocaiqq
dabocaiqq   2018.01.10 19:51

回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考。
回调函数原理:
我现在出发,到了通知你”
这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后的流程
例子
1.基本方法
?
1
2
3
4
5
6
7
8
9
10
11
12

function doSomething(callback) { // … // Call the callback callback('stuff', 'goes', 'here'); } function foo(a, b, c) { // I'm the callback alert(a + " " + b + " " + c); } doSomething(foo);

或者用匿名函数的形式
?
1
2
3
4
5
6
7
8
9
10

function dosomething(damsg, callback){ alert(damsg); if(typeof callback == "function") callback(); } dosomething("回调函数", function(){ alert("和 jQuery 的 callbacks 形式一样!"); });

2.高级方法

使用javascript的call方法
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function Thing(name) { this.name = name; } Thing.prototype.doSomething = function(callback) { // Call our callback, but using our own instance as the context callback.call(this); } function foo() { alert(this.name); } var t = new Thing('Joe'); t.doSomething(foo); // Alerts "Joe" via `foo`

传参数
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function Thing(name) { this.name = name; } Thing.prototype.doSomething = function(callback, salutation) { // Call our callback, but using our own instance as the context callback.call(this, salutation); } function foo(salutation) { alert(salutation + " " + this.name); } var t = new Thing('Joe'); t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`

使用 javascript 的 apply 传参数
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function Thing(name) { this.name = name; } Thing.prototype.doSomething = function(callback) { // Call our callback, but using our own instance as the context callback.apply(this, ['Hi', 3, 2, 1]); } function foo(salutation, three, two, one) { alert(salutation + " " + this.name + " – " + three + " " + two + " " + one); } var t = new Thing('Joe'); t.doSomething(foo); // Alerts "Hi Joe – 3 2 1" via `foo`

例子
//假如提供的数据源是一整数,为某学生的分数,当num<=0,由底层处理,当n>0时由高层处理.
//将下面这个函数拷贝下来存盘为1.js
?
1
2
3
4
5
6
7
8
9
10
11
12
function f(num,callback){
if(num alert("调用低层函数处理!");
alert("分数不能为负,输入错误!");
}else if(num==0){
alert("调用低层函数处理!");
alert("该学生可能未参加考试!");
}else{
alert("调用高层函数处理!");
callback();
}
}
//将下面这个test.html文件存盘与1.js在一个目录下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
br> "http://www.w3.org/TR/html4/loose.dtd">


无标题文档 function test(){ var p=document.getElementById("pp"); pp.innerText=""; var num=document.getElementById("score").value; f(num,function(){ //匿名高层处理函数 if(num<60) alert("未及格!"); else if(num<=90) alert("该生成绩优良!"); else alert("该生成绩优秀!"); }) pp.innerText="by since1978 qq558064!" }

回调函数示例:当学生成绩score0时,由高层处理。

请输入学生成绩



下面是其它网友的补充:
javascript中的回调模式:
形如:
?
1
2
3
4
5
6
7
8
9
10
11
function writeCode(callback){
//执行一些事物,
callback();
//...
}

function intrduceBugs(){
//....引入漏洞
}

writeCode(intrduceBugs);
我们传递函数的应用给writeCode(),让writeCode在适当的时候来执行它(返回以后调用)
先看一个不怎么好的例子(后续要对其重构):
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//模拟查找页面中的dom节点,将查找到的节点存在数组里面统一返回
//此函数只用于查找不对dom节点做任何的逻辑处理
var findNodes = function(){
var i = 100000;//大量的循环,
var nodes = [];//用于存储找到的dom节点
var found;
while(i){
i -=1;
nodes.push(found);
}
return nodes;
}

//将查找找到的dom节点全部隐藏
var hide = function(nodes){
var i = 0,
max = nodes.length;
for(;i<max;i++){
//findNodes后面有括号代表立即执行,先执行findNodes()然后执行hide()< hide(findNodes()); 执行函数 } ;
nodes[i].style.display="none"
}

上面的方法是低效的,以为hide()必须再次遍历有findNodes()返回的数组节点,如何避免这种多余的循环呢。
我们不能直接在findNodes中对查询到的节点进行隐藏(这样检索就可修改逻辑耦合了),那么他就不再是一个通用函数了。
解决方法是用回调模式,可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行

//重构findNodes以接受一个回调函数
var findNodes = fucntion(callback){
var i = 100000,
nodes = [],
found;
//检查回调函数是否可用调用的
if(typeof callback !== 'function'){
callback = false;
}
while(i){
i -= 1;
if(callback){
callback(found);
}
nodes.push(found);
}
return nodes;
}

//回调函数
var hide = function(node){
node.style.display = 'none ';
}
//找到后续节点并在后续执行中对其进行隐藏
findNodes(hide);//先执行findNodes然后执行hide,当然回调函数也可以在调用主函数时创

dabocaiqq
dabocaiqq   2018.01.10 19:52

微信小程序API回调函数的阻塞

问题现象

bindTest 是按钮触发事件,我按两下打印的LOG如下(第1次按和第2次按,打印的顺序不一致???):
alt text

而代码是这样的:
alt text

app.getUserInfo就是官方DEMO示例:
alt text

日志打印是1在2前,实际第一次点按钮触发bindTest方法后,却发现先输出2再输出1,第二次以后都是正常的。

具体原因

wx.login和wx.getUserInfo的回调函数是异步的!
正因如此,app.getUserInfo的cb也就有第一次是异步执行的情况,导致先输出2,相当于还没有获取到用户信息时,这两个接口就直接返回了,真正获取用户信息的代码还在等待CPU调度,延后执行。
这也能解释我这些天的另一个疑惑“为何第一次调用login,getUserInfo总是拿不到正确信息”,其实不是拿不到,只是有点“延迟”而已!

扩展

据微信开发者社区前辈介绍,微信小程序API接口有些是异步的,有些是同步的,新手在使用时需要注意了。

dabocaiqq
dabocaiqq   2018.01.10 19:52

严格来说,这不能算是一篇微信小程序教程,不过会使用到上一篇中的app.js代码作为示例,姑且充个数吧。

回调函数

回调函数,对于初入编程这一行的同学可能会有些难以理解,毕竟回调函数的使用和程序顺序执行的直观流程是相悖的。

想象你定了一个外卖,一种是你定时去查看外卖有没有到,一种是你出示电话号码给外卖员,到达的时候电话通知你。
很容易可以看出第二种是更加高效的方案,其实这种通知机制应用到编程领域,就是回调函数了。

熟悉win32开发的同学应该知道,典型的windows程序框架就是一个消息循环外加一个窗口过程函数。其中windows系统接管消息接受,之后调用开发者的窗口过程函数来完成具体的消息处理逻辑。窗口过程函数就是一个回调函数。

为什么需要回调函数

以上面的 win32程序为例。我们知道出于安全性考虑,windows操作系统是不允许开发者直接访问硬件资源的。微软的开发者提供了api来处理消息循环,但是具体消息的响应逻辑需要开发者来提供,这种情形下,回调函数就是很好的实现方案。

再举一个例子,想象你参与一个手机设备管理软件项目的开发工作,你负责底层设备通信模块。当用户插入设备到电脑中时,你需要通知上层的模块进行处理。出于灵活性和通用性的考虑,你不可能将设备连接时的处理逻辑放在你负责的模块中,此时可以由上层调用者提供一个回调函数,在设备连接时你的模块调用回调函数即可。

关于回调函数,有一个所谓的好莱坞准则:Don’t call me; I’ll call you!

匿名函数

在c,c++等语言中,当需要使用回调函数时,需要预先定义一个函数体。而回调函数通常只是提供给其它模块进行调用,为了简化编码,后续的javascript等脚本语言中提供了对匿名函数的支持。(注: 新的c++标准也开始支持匿名函数,称为Lambda函数)

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)
}
})
}
})
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
上面的代码来自于上一篇教程中的app.js,在调用wx.login时,传递了一个匿名函数进行调用成功后的逻辑处理,就是success后面的部分。可以看到这里只有函数定义而没有函数名称,因此除了作为回调函数外,也无法在其它地方调用该函数。

实际上匿名函数仅仅是一种编码简化而已,不过它带来的好处却不仅仅是减少编码而已。

闭包

在编程技术中,闭包应该属于较高级的技术了。
当使用回调函数时,通常会涉及到一些上下文的传递。在c/c++等语言中,会使用全局变量或堆内存来传递上下文。全局变量的缺点很明显,而堆内存又很容易发生内存泄漏。而在更高级的脚本语言中,可以通过闭包技术来轻松的完成上下文传递。

以上面的代码为例,在回调函数中执行了that.globalData.userInfo = res.userInfo来保存用户信息,其中that变量由var that = this赋值,因此该变量指向app对象本身,所以才能成功保存用户信息。

我们可以看到that对象是getUserInfo方法栈上的变量,如果没有闭包技术,此处的匿名回调函数是不能直接使用that变量的,就需要将app对象传递给回调函数(全局变量或函数参数的方式),而在闭包技术的支持下,回调函数可以像使用函数内部变量一样来访问that变量,语法上便捷了许多。

dabocaiqq
dabocaiqq   2018.01.10 19:53

参考下这个程序

dabocaiqq
dabocaiqq   2018.01.10 19:54

共11条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!