为什么需要JS回调
什么是JS回调
函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回;:
- 回调;
在这里插入代码片注意到click方法中是一个函数而不是一个变量
//它就是回调函数
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
//或者
function click() { // 它就是回调函数
alert("Btn 1 Clicked");
}
$("#btn_1").click(click);
2.回调的另一种方式
在这里插入代码片
//第一种方法:匿名函数作为回调函数
function getInput(options, callback){
var arr = [];
arr.push(options);
//将全局变量generalLastName传递给回调函数
callback(generalLastName,arr);
}
getInput({name:"Rich",speciality:"Javascript"}, function(generalLastName,arr){
console.log(generalLastName + ":" + arr[0].speciality) // Cliton:Javascript
});
//第二种方法:命名函数作为回调函数
function getInput(options, callback){
callback(generalLastName,arr);
}
function a(generalLastName,arr){
console.log()
}
getInput({name:"test",speciality:"Javascript"}, a);
回调的方式和种类
demo
同步与异步
同步与异步的概念
异步处理呢就是我们通过事件触发到 ajax,请求服务器,在这个期间无论服务器有没有响应,客户端的其他代码一样可以运行。
同步处理:我们通过实践触发 ajax,请求服务器,在这个期间等待服务器处理请求, 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
实现界面刷新功能
本界面刷新
在本界面刷新比较简单,如果是一个List列表,同步请求的话,在Ajax中直接
重新查询一遍就可以了。
例如如下代码:
if (response.code == '0') {
rtnData = response.data;
d1_1_BillList.queryDataByCondition();
} else {
YuXP.showMsgBox('提示', '错误代码:' + response.code + ',错误信息:' + response.message);
}
利用回调刷新
流程如下:
1.流程如下:
这种情况下只是多了个回调过程而已。
2 list界面代码如下:
YuXP.openDialog('增加', '/yuxp/product/pages/bizmanage/lmtBiz/lmtBiz/groupLmt/groupLmtApp/lmtGrpAdd.js', '600', '500 ', null, function () {
d1_1_BillList.queryDataByCondition();
});
如何使用呢?首先我们知道异步是不管服务器是否响应的, 那么比如一个刷新功能如何实现呢?
首先我们应该确定请求方式,如果是同步请求那么就是阻塞的,正常流程即可?那么异步呢?
既然是异步刷新,假设有一个刷新的函数,我们应该放在哪个位置呢?
既然是异步刷新,我们放在客户端代码流程中就没有用,所以我们放在异步代码块中, 这种回调我们可以认为是一种响应,代码就应该写在调用API代码了。
在这里插入代码片` async: false, // 同步请求
// url: YuXPUtil.getTopWindow().backend.cmisBiz + '/api/iqpwriteoffapp/update',
url: YuXPUtil.getTopWindow().backend.cmisBiz + '/api/asplagrapp/',
data: JSON.stringify(YuXPUtil.toUpperCase(params, true)),
success: function (response, status, xhr) {
console.log('返回信息打印:' + JSON.stringify(response) + '返回状态:' + status + 'xhr:' + JSON.stringify(xhr));
if (response.code == '0') {
console.log('aaaaaaaaaa');
YuXP.showMsgBox('提示', ' 插入成功', 200, 200, function () {
// d1_BillList.refreshBillListData();
// d1_BillList.refreshCurrentPage();
// window.location.reload();
// window.parent.reload();
YuXP.closeDialog();
});
// rtnData = response.data;
} else {
console.log('bbbbbbbbbbbbbbb');
YuXP.showMsgBox('提示', '错误代码:' + response.code + ',错误信息:' + response.message);
}
},
error: function (result, b) {
console.log(result + ';错误信息:' + b);
YuXP.showMsgBox('提示', result + ';错误信息:' + b); // 弹出提示
}
});
// if (rtnData != '1') {
// YuXP.showMsgBox('提示', '错误代码:保存失败,错误信息:更新异常');
// return false;
// }
// window.parent.refreshBillListData();
// return saveFlag;`
问题
我们写了上述代码后代码就好了吗? 结果我们发现竟然有问题?
问题是啥呢?== 发现数据有时是更改的,有时是没更改的==
原因是异步时机出了问题,这里有2种情况,第一种情况
后台完成操作,界面完成刷新,此时OK,第2种是后台没有完成操作,
前台就已经刷新了,此时怎么解决呢?
第一种情况,若是同步请求,我们
居中的图片:
如果是的异步请求怎么办呢?有机会讨论。
到底是在哪儿刷新,待后记