由JS函數返回值引起的一場」血案"

時間 2019-11-11

標籤函數返回引起一場血案欄目 JavaScript 简体版

原文原文鏈接

---恢復內容開始---javascript

啊。。。原本昨天晚上想寫來着，結果陪老婆看電視劇就忘了。。。呢滴神啊，原諒我吧。html

背景:昨天在項目中作一個小功能的時候，出現了個小問題，並且一開始找了半天也沒找到緣由。問題是這樣的：java

功能模塊：庫存模塊jquery

具體業務:倉庫出庫ajax

功能：一、單個產品出庫二、批量產品出庫（這些產品是連號的）json

問題出處：批量產品出庫。異步

具體實現：出庫人員要輸入產品的起始號碼和結束號碼，我在前臺js作循環，爲這些產品一個個出庫，可是在出庫前，我要判斷輸入的產品在庫存中的狀態，若是輸入的這個產品的狀態是不能出庫的，那麼此產品也不能出庫。這時，一但有產品部能出庫，我就要終止循環（爲何終止循環式根據業務要求，這裏很少作解釋了。我用ajax異步去判斷每一個卡號是否能夠出庫。async

代碼以下：函數

OrderStock.ValidataProductsWouldOouPut = function () {
　　　　　　　　.........
　　　　　　　　.........

            var startNum = 1;
            var endNum = 100;
            for (var i = startNum; i < endNum; i++) {
                var result = BeginValidateByNumber(i);

　　　　　　　　　　 if (!result) {
　　　　　　　　　　 alert("編號" + i + "出庫失敗");
　　　　　　　　　　　break;
　　　　　　　　　　　}post

            }
        }

        function BeginValidateByNumber(_num) {
　　　　　　　　........　　　
　　　　　　　　........

            $.post("url", { Num: _num }, function (data) {
                if (data.Success) {
                    return true;
                }
                else {
                    return false;
                }
            });
        }

//代碼中的........表明前面的一些處理代碼我就省略掉了

但是函數BeginValidateByNumber每次的返回值都是個null的，就是result獲得值一直都是undefined。我湊，我就鬱悶了，不該該啊，js函數有返回值的我都用了好長時間了，也沒出先這個問題啊。

因而，通過筆者近一個小時的研究，終於發現問題的所在（其實這個問題挺二的，好吧，我也認可本身犯二了）。

緣由在哪呢，其實true或這false的確返回去了，可是代碼中返回值是 ajax中 function（data）{} 這個毀掉函數的返回值。爲了把這個問題說的更明白些，那就讓咱們看看jquery的ajax函數都幹了點啥吧。

下面代碼是我模擬了一下jquery的ajax函數，只是簡單的寫了一下，而且可能有些實現和query的不一樣，但大概思想是沒有錯的。（請小夥伴沒不要太較真。。。若是想在瞭解的清楚也行也能夠去看jquery的源碼 ^_^）。

注：可能有的小夥伴常常直接$.post、$.get、$.ajax這麼用，而歷來沒有去了解過異步具體是怎麼回事，那麼也但願這些小夥伴去了解一下xmlhttprequest這麼個東東，固然這和咱們這一節的最終討論的問題不影響。

MyJqueryForAjax.js文件：

 1 //--------------------------Begin ----------------------------------
 2 var defaults = {
 3     url: "default.ashx",
 4     data: "",
 5     type: "get",
 6     sussessfn: null,
 7     errorfn: null,
 8     async: true
 9 };
10 
11 if (!window.MyJQ) window.MyJQ = {};
12 
13 MyJQ.Ajax = function (settings) {
14     var param = $.extend(defaults, settings);
15     var xmlhttp;
16     var jsonObject = param.data;
17     var jsonStr = "";
18     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
19         xmlhttp = new XMLHttpRequest();
20     }
21     else {// code for IE6, IE5
22         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
23     }
24 
25     xmlhttp.onreadystatechange = function () {
26         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
27             if (param.sussessfn) {
28                 var result = param.sussessfn(xmlhttp.responseText);//注意這裏，這裏調用了回調函數sussessfn，而且獲得返回值
29                 alert("這裏纔是回調函數返回的值：" + result);
30             }
31         }
32     }
33     for (var item in jsonObject) {
34         jsonStr += (item + "=" + jsonObject[item] + "&");
35     }
36     jsonStr = jsonStr.substring(0, jsonStr.length - 1);
37 
38     if (param.type == "get") {
39         param.url += "?" + jsonStr;
40         param.data = null;
41     }
42 
43     xmlhttp.open(param.type, param.url, param.async);
44     xmlhttp.send(param.data);
45 };
46 
47 //---------------------------------end---------------------------

前臺頁面：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="Script/jquery-1.9.1.js" type="text/javascript"></script>
 5     <script src="Script/MyJqueryForAjax.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).delegate("#Btn_Test", "click", function () {
 8             var settings = {
 9                 url: "Handlers/TestHandler.ashx",
10                 type: "get",
11                 data: {
12                     name: "xiaoming",
13                     pwd: "123456"
14                 },
15                 sussessfn: function (data) {
16                     alert(data);
17                     if (data == "ok") {
18                         return true;
19                     }
20                     else {
21                         return false;
22                     }
23                 }
24             };
25             MyJQ.Ajax(settings);
26 
27         });
28     </script>
29 
30 </head>
31 <body>
32     <form id="form1" runat="server">
33     <div>
34             <input type="button" value="Test"  id="Btn_Test"/>
35     </div>
36     </form>
37 </body>
38 </html>

請求的Handlers/TestHandler.ashx的代碼：

 1 context.Response.ContentType = "text/plain";
 2             var _request = context.Request;
 3             string name = _request.Params["name"];
 4             string pwd = _request["pwd"];
 5             if (string.Equals(name, "xiaoming") && string.Equals(pwd, "123456"))
 6             {
 7                 context.Response.Write("ok");
 8             }
 9             else {
10                 context.Response.Write("no");
11             }