javascript異步調用的同步問題

最近在研究javascript,發現批量的異步處理存在同步問題,研究了半天,最終用setTimeout解決了這個問題

處理代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BMap1.aspx.cs" Inherits="BMap1" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>    
</head>
<body>
    <form id="form1" runat="server">       
     <script type="text/javascript">
         // 創建地址解析器實例
         var myGeo = new BMap.Geocoder();
         // 將地址解析結果顯示在地圖上,並調整地圖視野
         var COUNT = 30;
         var num = 0;
         var bFinishOne = true;


         function btn() {    
         
             //觸發地址解析         
             timeout1();
         }
         
         //批地址解析處理過程
         function timeout1() {
         
             //100ms判斷一次,調用結果是否返回
             if (bFinishOne == false) {
                 setTimeout(timeout1, 100);
                 return;
             }
             //地址解析調用
             myGeo.getPoint("北京市海淀區上地10街", function(point) {


                 if (point) {
                     document.getElementById("map").innerHTML += point.lng + "----" + num ;
                     out1();
                 }


             }, "北京市");
             //已經開始一次調用,初始化bFinishOne ;
             bFinishOne = false;             
             
             //打印調用開始信息
             document.getElementById("map").innerHTML += "F_START"
             
             //所有業務調用處理完,退出
             if (num == COUNT) {
                 num = 0; 
                 return;
             }      
             //觸發100ms一次的調用,啓動結果返回判斷流程
             setTimeout(timeout1, 100);


         }
         
         //一次調用處理完畢的回調處理
         function out1() {
             document.getElementById("map").innerHTML += "F_END" + "<br/>"
             //該次處理完,置bFinishOne爲處理完狀態
             bFinishOne = true; 
             num++;
             if (num == COUNT) {
                 alert("finished send!");                            
             }                  
         }         
     </script>


    <input id="Button1" type="button" value="button"  οnclick="btn();"/>
     <div id="map" style="overflow:scroll;width:500px;height:320px"></div>
    </form>
</body>

</html>



具體參見代碼中的解釋,處理輸出如下:

F_START116.308992----0F_END
F_START116.308992----1F_END
F_START116.308992----2F_END
F_START116.308992----3F_END
F_START116.308992----4F_END
F_START116.308992----5F_END
F_START116.308992----6F_END
F_START116.308992----7F_END
F_START116.308992----8F_END
F_START116.308992----9F_END
F_START116.308992----10F_END
F_START116.308992----11F_END

。。。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章