Javascript函数不等待回调函数完成

时间:2017-09-14 17:50:50

标签: javascript jquery

我有一个在线平台,我希望用户提交的每个HTML表单都可以使用数字签名令牌进行数字签名。

我正在测试API(Javscript API + .exe (that need to be installed at the users' machine)).

代码就像这样

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sign Form Page</title>
<script type="text/javascript" src="docsign.js"></script>
</head>
<body>
<script type="text/javascript">

    var DocSignObj = _docSignObj; 

    var myCallbackFun;

    $(function(){ 

        //This lets the API know that SignData() function needs to call 
        //myCallbackFun function after its job is done
        DocSignObj._initialize(myCallbackFun);      

    }); 

   function sign(form){

       //does some stuff like serializing form data etc
       var formData =serialize(form);

       //This function is exposed by the API.
       //It opens the dialog box to  get Digital Certificate Details from 
       //user, 
       //validates the details and 
       //then generates the Digital Signature which is returned in the 
       //callback 
       //function
       DocSignObj.SignData(formData);       
   }

   function submitForm(){   

       //Once this function is called it should wait till myCallbackFun does 
       //its job.
       sign(form);

       //The following line of code is executed immediately instead leaving 
       //DIG_SIG element as empty
       document.FORM_TO_BE_SIGNED.submit(); 
  }

  function myCallbackFun(result){
        var digitalSignature = result.sig;
       document.getElementById("DIG_SIG").value = digitalSignature;
   }
</script>

<form id="FORM_TO_BE_SIGNED" action="" method="">

    <input type="hidden" id ="DIG_SIG" value="" />
    <input type="text" id="data" /></br> 
    <input type="submit"
        value="Sign Form Data" onclick="submitForm()" />
</form>
</body>
</html>

会发生什么

document.FORM_TO_BE_SIGNED.submit(); 

之后立即执行

sign(form);

表单无需签名即可提交。

1 个答案:

答案 0 :(得分:0)

在将一些未定义的form传递给sign( form ),将一个表单序列化而不使用name=""作为输入等时,您会遇到很多错误...

不是计算你的错误,而是我这样做的方式......希望你能够在下面的例子中找到足够清楚的所有评论,但是对于进一步的问题可以随意询问所以我可以改进:

&#13;
&#13;
// Let's say it does this...
var DocSignObj = {
  data: {
    sig: "sig_012345679abcd_sig" // Some digital signature
  },
  SignData: function(serializedForm) {
    this.data.serializedForm = serializedForm;
    return this.data;
  },
  _initialize: function(cb) {
    return cb(this.data);
  }
};

// Now...

function myCallbackFun(result) {
  // DIGITALLY SIGN BY API CALLBACK
  $("#DIG_SIG").val(result.sig);
}

function sign(form) {
  // does some stuff like serializing form data etc
  DocSignObj.SignData($(form).serialize());
  // presumably it checks if the "sig_***_sig"
  // from the serialized string is valid at submit-time.
}

function submitForm(event) {
  // 1 DON'T SUBMIT YET
  event.preventDefault();
  // 2 SIGN IT
  var signedData = sign(this); // where `this` is the $form
  // 3 SUBMIT FORM
  // $(this).submit();           // TODO: uncomment this line to submit form!
  console.log("SUBMITTED!!! %o", DocSignObj.data);
}

jQuery(function($) {
  //This lets the API know that SignData() function needs to call 
  //myCallbackFun function after its job is done
  DocSignObj._initialize(myCallbackFun);
  $("#FORM_TO_BE_SIGNED").on("submit", submitForm);
});
&#13;
<form id="FORM_TO_BE_SIGNED" action="" method="">
  <input name="sign" type="text" id="DIG_SIG" disabled> (the hidden one... just to test if SIG is being added)<br>
  <input name="data" type="text" id="data" value="Name Surname"><br>
  <input type="submit" value="Sign Form Data">
</form>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
&#13;
&#13;
&#13;