问题的引出：在js中使用异步调用时，有可能会出现在异步的回调函数中设置调用之外的变量值，但在异步调用完成后去使用变量，却发现这些变量值并没有被成功设置的情况。如: google map中的地理编码，地理编码是将地址（如“1600 Amphitheatre Parkway, Mountain View, CA”）转换为地理坐标（如纬度 37.423021 和经度 -122.083739）的过程，您可以根据该地理坐标放置标记或定位地图。这个服务是异步调用，他使用geocoder进行服务查询，在查询过程中会使用返回状态码，当返回成功后我们设置其中的经度和纬度，并在以后的过程中使用这些经度和纬度，当后面的程序使用这些经度和纬度的时候发现这些经度和纬度并没有被正确地设置。

例如：

 <!DOCTYPE html>

 <html>

 <head>

     <title>Geocoding Test</title>

     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>  
6 <script type="text/javascript" src="geocode.js"></script>  
7 </head>  
8 <body>  
9 <div id="panel"> 

 <input id="address" type="text" value=""> 

 <input type="button" value="Change" onclick="codeAddress()"> 

 </div>  <div id="map-canvas"></div>  </body>  </html>
 var valLat = 0, valLng = 0;

 function codeAddress() {

     var geocoder = new google.maps.Geocoder();

     var address = document.getElementById('address').value;

     geocoder.geocode({ 'address': address }, function (results, status) {

         if (status == google.maps.GeocoderStatus.OK) {

             valLat = results[0].geometry.location.lat();

             valLng = results[0].geometry.location.lng();

         } else {

             alert('Geocode was not successful for the following reason: ' + status);

         }

     });

     alert("valLat: " + valLat + ", valLng: " + valLng);

 }

整个页面有一个文本输入框和一个按扭，在文本框中输入地址“中国”，然后点击“Change”按扭

预期结果：显示出”中国“的经纬度信息

实际结果：显示的经纬度均为初始值0

分析原因：地理编码是异步服务，因此当执行geocode服务后就会继续执行后面处理经纬度的代码，此时的经纬度还没有被设置而是初始值

改进方法：将显示经纬度的代码放入地理编码的回调函数中，此时就会显示出正确的”中国“的经纬度

 var valLat = 0, valLng = 0;

 function codeAddress() {

     var geocoder = new google.maps.Geocoder();

     var address = document.getElementById('address').value;

     geocoder.geocode({ 'address': address }, function (results, status) {

         if (status == google.maps.GeocoderStatus.OK) {

             valLat = results[0].geometry.location.lat();

             valLng = results[0].geometry.location.lng();

         } else {

             alert('Geocode was not successful for the following reason: ' + status);

         }

         alert("valLat: " + valLat + ", valLng: " + valLng);

     });

     //alert("valLat: " + valLat + ", valLng: " + valLng);

 }

新的问题：虽然这样可以解决异步调用显示不正确的问题，但是这样涉及到破坏封装，并造成不易于维护

改进方法：将涉及到经纬度处理的代码段使用一个函数进行调用

 var valLat = 0, valLng = 0;

 var count = 1;

 //function codeAddress() {

 function codeAddress(callback) {

     var geocoder = new google.maps.Geocoder();

     var address = document.getElementById('address').value;

     alert(address);

     geocoder.geocode({ 'address': address }, function (results, status) {

         if (status == google.maps.GeocoderStatus.OK) {

             valLat = results[0].geometry.location.lat();

             valLng = results[0].geometry.location.lng();

             callback(valLat, valLng);

         } else {

             alert('Geocode was not successful for the following reason: ' + status);

         }

         //alert("valLat: " + valLat + ", valLng: " + valLng);

         //alert("valLat: " + valLat + ", valLng: " + valLng + ", count: " + count);

     });

     //alert("valLat: " + valLat + ", valLng: " + valLng);

 }

JS中的异步与回调的更多相关文章

  1. JS中的异步以及事件轮询机制

    一.JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.(在JAVA和c#中的异步 ...

  2. js中的异步与同步，解决由异步引起的问题

    之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性 在单线程的js中,异步代码会被放入一个事件队列,等到所有其他代码执行后再执行,而不会阻塞线程. 下面是j ...

  3. JS中的异步

    Hello,日常更新的我“浪”回来了!!! JS中有三座高山:异步和单线程.作用域和闭包.原型原型链 今天“浪”的主题是JS中的异步和单线程的问题. 主要从这三个方面入手 一.什么是异步(与同步作比较 ...

  4. js中的异步[Important]

    js作为前端最主流的语言,主要处理页面显示变化(mutation)和异步(asynchronicity), js语言的基本要素和使用惯例的演化大都围绕着这两大主题,两者均值得总结和思考的主题, 这里先 ...

  5. 互联网我来了 -- 2. js中&quot;异步/堵塞&quot;等概念的简析

    一.什么是"异步非堵塞式"? 这个名字听起来非常恶心难懂,但假设以 买内裤 这件事情来比喻运行程序的话就非常easy理解"异步非堵塞式"的涵义了. 比如你是一个 ...

  6. 咱们来聊聊JS中的异步，以及如何异步，菜鸟版

    为什么需要异步?why?来看一段代码. 问题1: for(var i=0;i<100000;i++){ } alert('hello world!!!'); 这段代码的意思是执行100...次后 ...

  7. js同步、异步、回调的执行顺序以及闭包的理解

    首先,记住同步第一.异步第二.回调最末的口诀 公式表达:同步=>异步=>回调 看一道经典的面试题: for (var i = 0; i < 5; i++) { setTimeout( ...

  8. 【第三周读书笔记】浅谈node.js中的异步回调和用js-xlsx操作Excel表格

    在初步学习了node.js之后,我发现他的时序问题我一直都很模糊不清,所以我专门学习了一下这一块. 首先我们来形象地理解一下进程和线程: 进程:CPU执行任务的模块.线程:模块中的最小单元. 例如:c ...

  9. promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

    * promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...

随机推荐

  1. 新手学ajax1

       学习的动力是最近想实现servlet向js传值,是html中的js,因为jsp是可以直接调用java 类的,在网上搜索了好久感觉ajax能帮我实现. 以下代码可以实现js向服务器发出一 requ ...

  2. 【CSAPP笔记】10. 代码优化

    写程序的主要目标是使它在所有可能的情况下都能正确运行(bug free),一个运行得很快但有 bug 的程序是毫无用处的.在 bug free 的基础上,程序员必须写出清晰简洁的代码,这样做是为了今后 ...

  3. mac下搭建MySql环境

    准备工作做完后,开始: 创建数据库 step1: 在mac中->系统偏好设置->最下边点MySQL 在弹出页面中 关闭mysql服务(点击stop mysql server) step2: ...

  4. C1WPF制作OLAP Cube浏览工具

    经过前期一段时间对WPF的学习了解,相信大家对WPF有了一定的了解.今天我们一起来了解使用Component One(简称C1)的WPF控件制作CUBE浏览工具.其实这个OLAP控件官方已经有了很详细 ...

  5. mysql只修改年月日，时分秒不变

    比如时间为 “2014-12-11 13:12:01”修改为“2014-09-26 13:12::01”修改内容为修改yyyy-mm-dd为对应的日期,时间不变.UPDATE result_road_ ...

  6. 检测web服务器指定位置大文件是否存在

    在bugscan群里看到有人问有一个大文件,想探测其是否存在.如果使用curl的话,会将整个文件下载到节点,对于扫描没有任何用处,反而浪费了扫描时间. 于是我想到的解决办法是不使用curl,直接用底层 ...

  7. Mysql 5.7 报错 3534 错误

    需要先 执行 mysqld  --initialize 然后  mysqld --install 最后  net start mysql 即可启动服务 如果不执行第一步 则会报错

  8. iphonex适配

    这一篇具体适配步骤比较全面 iphonex适配 这一篇图文讲解比较全面 关于H5页面在iPhoneX适配

  9. 最小费用流spfa算法模板（pascal）

    以前写过,现在的码风与以前有些变化,主要是用数组模拟邻接表存图,以前是用指针存图. 以前的博文:http://www.cnblogs.com/Currier/p/6387732.html 洛谷可评测. ...

  10. myeclipse8.6 注册码

    MyEclipse8.6 注册码 别处找的均是8.6版本,可以使用到2014年一:MyEclipse Standard Edition: zhucemLR7ZL-655954-695876566190 ...