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

。。。


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