详解闭包解决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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
jQuery动态添加
Apr 07 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
JavaScript经典案例之简易计算器
Aug 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数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
javascript回到顶部特效
2016/07/30 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
python3调用R的示例代码
2018/02/23 Python
对Django中内置的User模型实例详解
2019/08/16 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
大学新生欢迎词
2014/01/10 职场文书
好的促销活动方案
2014/08/21 职场文书
中班上学期个人总结
2015/02/12 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
python中pycryto实现数据加密
2022/04/29 Python