这些Ajax JS 回调方法和坑你知道吗？

为什么需要JS回调

什么是JS回调

函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回;：

1. 回调；

在这里插入代码片注意到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种是后台没有完成操作，
前台就已经刷新了，此时怎么解决呢？
第一种情况，若是同步请求，我们

居中的图片:

如果是的异步请求怎么办呢？有机会讨论。
到底是在哪儿刷新，待后记