详解闭包解决jQuery中AJAX的外部变量问题


Posted in Javascript onFebruary 22, 2017

详解闭包解决jQuery中AJAX的外部变量问题

在AJAX中,我们经常都要使用外部变量,经常会多次使用,如下代码

function getCarInfo(){
      for(var i=0;i<4;i++){

        var carId = $("#carList0"+i+" #carId").val();
        var request = { 
          city: city,
          carId: carId
        };

        $.ajax({
           url:"enquiry",
          type:'post',
          data:request,
          //async: false,
          success:function(data){
            //alert(data);
            var strArr = data.split("#");
            $("#carList0"+i+" #distributorId").val(strArr[0]);
            $("#carList0"+i+" #font16").html(strArr[strArr.length-1]);
          }
        });

      }
    }

我期待的是按顺序alert(1) alert(2) alert(3) alert(4),但是实际上三次都是alert(4)

这均是由于AJAX异步导致的问题,设置同步(async: false,)就可以解决这个问题,但是随之而来的是,效率减低很多。这时可以轻松使用闭包解决问题:

function getCarInfo(){
      for(var i=0;i<4;i++){
      ((function(i){
        var carId = $("#carList0"+i+" #carId").val();
        var request = { 
          city: city,
          carId: carId
        };

        $.ajax({
           url:"enquiry",
          type:'post',
          data:request,
          //async: false,
          success:function(data){
            //alert(data);
            var strArr = data.split("#");
            $("#carList0"+i+" #distributorId").val(strArr[0]);
            $("#carList0"+i+" #font16").html(strArr[strArr.length-1]);
          }
        });
        }(i)));
      }
    }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery tab插件制作实现代码
Jun 22 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 #Javascript
纯JS实现轮播图
Feb 22 #Javascript
javascript 操作cookies详解及实例
Feb 22 #Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 #Javascript
js实现简易垂直滚动条
Feb 22 #Javascript
微信小程序 引用其他js文件实现代码
Feb 22 #Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 #Javascript
You might like
php miniBB中文乱码问题解决方法
2008/11/25 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
input 高级限制级用法
2009/03/26 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
详解python metaclass(元类)
2020/08/13 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
2014年体检中心工作总结
2014/12/23 职场文书