问题的引出：在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. Calculator项目的过程及感受

    1.将Calculator项目传到Github上的链接地址:https://github.com/sonnypp/object-oriented/tree/master/Calculator 2.本次 ...

  2. fragment的学习

    这个讲的不错 http://blog.csdn.net/lmj623565791/article/details/37992017  Fragment与Activity交互的几种方式(二,使用Bund ...

  3. “吃神么，买神么”的第二个Sprint计划

    “吃神么,买神么”的第二个Sprint计划   一.现状   前台布局设计完成一个主页,可以让浏览者了解我们网站的功能,这是第一个阶段的Spring完成的事情.由于没有实际的功能体现,所以第二阶段开始 ...

  4. Think In Java读书笔记：内部类覆盖及其初始化

    本文相关章节:第十章 内部类 10.10 内部类可以被覆盖吗 在读至本节第二个范例代码时(及下方的代码),我对输出结果中的第一个“Egg.Yolk()”很不理解,为什么它会第一个地方输出. 我起初认为 ...

  5. url 地址含参数较多如何拼接

    url 地址拼接是经常会遇到的问题.所以必须要掌握这个技术 1.合并参数对象,循环出来. var commonParams = { g_tk: 1928093487, inCharset: 'utf- ...

  6. 解决tomcat登录需要给角色授权

    1:编辑/usr/local/tomcat/conf/tomcat-users.xml文件,在没有注释的内容中添加: <role rolename="manager-gui" ...

  7. mysqldumpslow 分析slow query日志和explain分析mysql查询结构

    mysqldumpslow的使用:比如我们要查询按时间返回前5条日志信息,格式如下:mysqldumpslow -s t -t 5 /var/log/mysql/slowquery_20180303. ...

  8. mysql 随机获取一条或多条数据

    若要在i ≤r≤ j 这个范围得到一个随机整数r ,需要用到表达式 FLOOR( RAND() * (j – i)+i),RLOOR()取整树部分,RAND()生成0~1的随机数.ROUND(x,n) ...

  9. 使用Word 进行UTF8 以及字符串编码的转换操作

    1. 使用Word文档能够实现 字符串和utf8编码的转换. 快捷键是 ALT+X 在知乎的一个里面看到一个说法: ㍾ ㍽ ㍼ ㍻ - 这四个在Unicode表里是倒序排列的,而且只预留了这四个年号, ...

  10. List<Map> 进行求和

    public class Main { public static void main(String[] args) { List<Map> lists = new ArrayList&l ...