免费刷金币,请点击这里
TE社区 > 前端技术
客服QQ:1206116161

变量冲突处理

低首闻忘川水 于 2018-05-23 16:00:03 创建话题
(4)
(0)
举报
最近做了一阶段的AJAX开发,有一些心得体会。日后会慢慢写出来,也请AJAXer多多指教~   刚开始写AJAX代码的时候,直接参照的是AJAX基础教程一书中的代码(该书真的很不错,是AJAX入门的经典教材,是图灵出版社的。计算机方面的书籍,我最信任的就是O'R和图灵的)。   
   该书的创建XMLHttpRequest对象的代码如下: 
var xmlHttp; 
function createXMLHttpRequest() {    if (window.ActiveXObject) {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }     else if (window.XMLHttpRequest) {        xmlHttp = new XMLHttpRequest();    }} 
在一般情况下,该代码的使用不会带来任何问题。
如:
function test1(){ createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange1; url = "test.php?ts=" + new Date().getTime(); xmlHttp.open("GET", url, true); xmlHttp.send(null);}
function test2(){ createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange2; url = "test.php?ts=" + new Date().getTime(); xmlHttp.open("GET", url, true); xmlHttp.send(null);}

function handleStateChange1() {    ......
}


function handleStateChange2() {    ......
}
..........

在页面的不同地方调用test1,test2函数都能正常工作。即不同时刻调用的话,就不会产生问题。

但是假如你需要在同一时刻同时调用这两个函数,则会发现只有其中一个可以正常运行。
比如,我在加载页面的时候运行如下函数:

function init(){ test1(); test2();}

此时,则test1,test2只有一个函数会正常执行。

分析下原因,是由于javascript的语言特性导致。一般情况下,Javascript的变量,函数等等,都是公用的,其他对象都能访问(可读可写)。这就是问题的所在。在同一时刻,调用test1和test2就会出现“变量xmlHttp”的冲突。

解决方法:

1  最简单的方法,不要在同一时刻调用,如init函数可以改为:

function init(){ test1(); setTimeout("test2()",500);}

   但该方法属于投机,并未真正解决问题。

2  修改“XMLHttpRequest创建函数”,改为一实例化函数。

function createXMLHttpRequest() {    if (window.ActiveXObject) {        var xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");    }     else if (window.XMLHttpRequest) {        var xmlHttpObj = new XMLHttpRequest();    } return xmlHttpObj;}

实例化时相应的改为:

function test1(){ xmlHttp_1 = createXMLHttpRequest(); 
 xmlHttp_1.onreadystatechange = handleStateChange1; url_1 = "test.php?ts=" + new Date().getTime(); xmlHttp_1.open("GET", url, true); xmlHttp_1.send(null);}



function test2(){ xmlHttp_2 = createXMLHttpRequest(); 
 xmlHttp_2.onreadystatechange = handleStateChange1; url_2 = "test.php?ts=" + new Date().getTime(); xmlHttp_2.open("GET", url, true); xmlHttp_2.send(null);}

这样子处理的话,即使在同一时刻调用test1,test2函数,也不会产生问题了,实现了真正的“同步”。 

#######################################################
通过该方法,可以引申出javascript中对象的“私有属性”的创建方法:
1 私有属性可以在构造函数中使用 var 关键字定义。
2 私有属性只能由特权函数公用访问。(特权函数就是在构造函数中使用this关键字定义的函数)。外部客户可以访问特权函数,而且特权函数可以访问对象的私有属性。

比如下面这个Vehicle类,则wheelCount和curbWeightInPounds就是私有属性,只能通过特权函数访问/设置了:
function Vehicle() {    var wheelCount = 4;    var curbWeightInPounds = 4000;
    this.getWheelCount = function() {        return wheelCount;    }
    this.setWheelCount = function(count) {        wheelCount = count;    }
    this.getCurbWeightInPounds = function() {        return curbWeightInPounds;    }
    this.setCurbWeightInPounds = function(weight) {        curbWeightInPounds = weight;    }
 }
扫码关注TE官方微博 扫码关注TE官方微博
WordPress在IIS服务器上的伪静态设置方法(解决中文URL无法访问问题) JavaScript实现in-place思想的快速排序方法 js实现input密码框提示信息的方法(附html5实现方法) PHP基于mssql扩展远程连接MSSQL的简单实现方法 基于bootstrap插件实现autocomplete自动完成表单 PHP漏洞挖掘的一点思路 Jquery easyui开启行编辑模式增删改操作 使用indexOf等在JavaScript的数组中进行元素查找和替换 ASP.NET 重定向的几种方法小结 浅谈Span和Div的区别 联想服务器RD450 配置RAID5阵列图文方法 SQL Server中使用sp_password重置SA密码实例 Node.js的特点和应用场景介绍 JQuery设置时间段下拉选择实例 jQuery中cookie插件用法实例分析 angularJS 入门基础 jquery 插件学习(五) 实现点击列表弹出列表索引的两种方式 javascript表单控件实例讲解 Vue中div contenteditable 的光标定位方法 JavaScript取得鼠标绝对位置程序代码介绍 用表格输出1-1000之间的数字实现代码(附特效) python3.6.3安装图文教程 TensorFlow安装配置方法 windows 7下Oracle 11g安装图文教程 超全面的Swift编码规范(推荐) Bootstrap输入框组件使用详解 Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题 JS Select下拉框(支持输入模糊查询) json对象转为字符串,当做参数传递时加密解密的实现方法 mysql中数据统计的技巧备忘录 TreeView无刷新获取text及value实现代码 将input框中输入内容显示在相应的div中【三种方法可选】 简单的方法让你的后台登录更加安全(php中加session验证) es6的数字处理的方法(5个) Asp.net中把Excel数据存储至SQL Server中的具体实现方法 jQuery的写法不同导致的兼容性问题的解决方法 js修改地址栏URL参数解决url参数问题 JavaScript中的对象序列化介绍 PHP中的随机性 你觉得自己幸运吗? Adobe Brackets 简单使用图文教程 jQuery插件jFade实现鼠标经过的图片高亮其它变暗 深入理解JSON数据源格式 redis字符串类型_动力节点Java学院整理 java 易懂易用的MD5加密(可直接运行)(2) JavaScript实现图片滑动切换的代码示例分享 Python中用PIL库批量给图片加上序号的教程 Ajax中的循环方案 常用的Oracle doc命令(收藏) IIS实现反向代理时Cookie域的设置方法 JDBCTM 指南:入门3 - DriverManager 在Linux下制作HTML幻灯片的简单教程 JavaScript中点击事件的写法 ResourceBundle类在jsp中的国际化实现方法 正则表达式对qq号码校验 Python之列表的插入&替换修改方法 使用css画三角形的方法代码 jquery和ajax的关系详细介绍 ASO优化如何选关键词?APP行为词的选择方法 Linux中使用grep命令搜索文件名及文件内容的方法 Javascript中的几种继承方式对比分析 CentOS中文件夹基本操作命令的讲解 Python实现完整的事务操作示例 JavaScript面向对象之Prototypes和继承 jquery仅用6行代码实现滑动门效果 使用XHGui来测试PHP性能的教程 LINUX Centos7搭建vsftpd服务 react高阶组件经典应用之权限控制详解 JavaScript获取页面中第一个锚定文本的方法 Python实现判断给定列表是否有重复元素的方法 Android中微信抢红包助手的实现详解 JavaScript操作文件_动力节点Java学院整理 MySQL 创建用户、授权用户、撤销用户权限、更改用户密码、删除用户(实用技巧) 使用css3制作动感导航条示例 Android实现圆形图片或者圆角图片 深入理解Vuex 模块化(module) 重命名SQLServer数据库的方法 jquery获取css的color值返回RGB的方法 Linux+php+apache+oracle环境搭建之CentOS下安装Apache pyqt5的QWebEngineView 使用模板的方法 Linux服务器从入门到精通52问 JavaScript精炼之构造函数 Constructor及Constructor属性详解 JS 正则表达式的位置匹配 ThinkPHP框架设计及扩展详解 Node.js模块封装及使用方法 vue使用mint-ui实现下拉刷新和无限滚动的示例代码 Python中类的初始化特殊方法 asp 小偷采集程序原理与常用函数方法 关于SSH 远程执行命令你要知道的二三事 关于页面嵌入swf覆盖div层的问题的解决方法 浅谈js的html元素的父节点,子节点 Android 基于RecyclerView实现的歌词滚动自定义控件 Springmvc 4.x利用@ResponseBody返回Json数据的方法 JavaScript三种绑定事件方式及相互之间的区别分析 微信获取用户地理位置信息的原理与步骤 JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析 使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法 Javascript 两种刷新方法以及区别和适用范围 Python学生信息管理系统修改版 基于BootstrapValidator的Form表单验证(24) JS得到当前时间的方法示例 Mac移动硬盘怎么格式化?Mac安装SSD后不读取磁盘的解决办法 php自动载入类用法实例分析 Numpy掩码式数组详解 Tomcat服务配置和自启动详解 Mac系统使用Sherlock查找特定资讯的方法 60条Android开发注意事项与经验总结 php把数据表导出为Excel表的最简单、最快的方法(不用插件) jQuery与其它库冲突的解决方法 css @import url加载样式应用深入分析 JavaScript AJAX之惰性载入函数 javascript 中的继承实例详解 vue使用drag与drop实现拖拽的示例代码 jquery中实现标签切换效果的代码 CodeIgniter表单验证方法实例详解 java实现字符串的全排列 CentOS 7下使用rpm包安装mysql 5.7.18 详解Maven Docker镜像使用技巧 Asp.Net实现404页面与301重定向的方法 Vue响应式原理详解 JavaScript初学者应注意的七个细节小结 Angular的自定义指令以及实例 简单十大步骤保护IIS Web服务器的安全 Jquery获取复选框被选中值的简单方法 JQuery的常用选择器、过滤器、方法全面介绍 asp cookie中文Javascript取得中文cookie MySQL Index Condition Pushdown(ICP)性能优化方法实例 aspnet_regiis.exe命令使用方法 一个健康合理的账户架构应该如何去策划执行? 详解Android运行时权限及APP适配方法 Js和JQuery获取鼠标指针坐标的实现代码分享 为了防止乱码,请将用于页面编码的meta charset放到title的前面 javascript实现获取图片大小及图片等比缩放的方法 最基础的Python的socket编程入门教程 Angular多选、全选、批量选择操作实例代码 PostgreSql新手必学入门命令小结 javascript将异步校验表单改写为同步表单 python模拟登录百度贴吧(百度贴吧登录)实例 在javascript中实现函数数组的方法 php curl获取到json对象并转成数组array的方法 vue-cli配置文件——config篇 WEB前端设计 良好的页面结构和优美网页的几点方法 基于IOS实现带箭头的view JavaScript sort数组排序方法和自我实现排序方法小结 jsp+servlet+jdbc实现对数据库的增删改查 Python运维自动化之nginx配置文件对比操作示例 详解linux下批量替换文件内容的三种方法(perl,sed,shell) jQuery实现在最后一个元素之前插入新元素的方法 python numpy 显示图像阵列的实例 js对象基础实例分析 原生JavaScript实现的简单省市县三级联动功能示例 Canvas实现微信红包照片效果 python中将字典转换成其json字符串 nginx限速之连接数限制技巧分享 jQuery+html5实现div弹出层并遮罩背景 asp.net System.Guid ToString五种格式 jQuery实现动态添加节点与遍历节点功能示例 php强制下载文件函数 python+opencv实现动态物体追踪 vs 不显示行号的操作方法 JS按钮闪烁功能的实现代码 解决mysql创建数据库后出现:Access denied for user 'root'@'%' to database 'xxx'的问题 Oracle 11g数据库安装与卸载的方法图解 浅谈AngularJS中使用$resource(已更新) Cropper.js 实现裁剪图片并上传(PC端) 访问和更改关系数据,使用MSSQL外联接 asp.net基于Web Service实现远程上传图片的方法 jQuery 常见小例汇总 js跨浏览器实现将字符串转化为xml对象的方法 asp.net Repeater 数据绑定的具体实现(图文详解) echarts学习笔记之箱线图的分析与绘制详解 国内外稳定的免费DNS推荐 详解Python命令行解析工具Argparse 用jQuery中的ajax分页实现代码 浅析Python3爬虫登录模拟 JS动态创建元素的两种方法 JavaScript组件开发完整示例 JS分页效果示例 利用JavaScript在网页实现八数码启发式A_算法动画效果 javascript定时器完整实例 Javascript 鼠标移动上去 滑块跟随效果代码分享 javascript中异常处理案例(推荐) 正则表达式re.sub替换不完整的问题及完整解决方案 JavaScript中“基本类型”之争小结 spring boot与spring mvc的区别及功能介绍 前端自动化开发之Node.js的环境搭建教程 基于SpringBoot实现用户身份验证工具 JavaScript修改css样式style Linux系统IO分析工具之iotop参数详解(查看IO占用) php中将一段数据存到一个txt文件中并显示其内容 微信小程序实现瀑布流布局与无限加载的方法详解 jQuery Ajax实现跨域请求 写出高性能SQL语句的35条方法分析 JavaScript中pop()方法的使用教程 利用css3如何设置没有上下边的列表间隔线 Ruby使用eventmachine为HTTP服务器添加文件下载功能 pygame学习笔记(3):运动速率、时间、事件、文字 CentOS 7下用yum快速安装MongoDB的方法教程 centos7更改docker仓库的方法 iOS简单画板开发案例分享 CentOS-6.4无线上网命令行配置介绍
Java 图书管理系统源码下载 HTML5带表盘和数字刻度时钟代码.zip jQuery清爽的点名抽奖游戏代码.zip 微信小程序源码-图片上传实现(java) wordpress家居博客主题.zip 仿聚美优品手机wap网站模板.zip 微信小程序源码-装修预约小程序 Discuz! x2清晰绿色风格模板.zip CSS3鼠标滑过动画线条边框特效.zip jquery文字输入特效.zip 【ASP.NET源码】诗词管理系统源码_hmportal.zip jQuery图片动态旋转插件.zip 创意办公家具设计网站模板.zip 红色商务外贸企业公司模板.zip 仿iPhone的alertview Admin Panel后台界面框架.zip jquery实现天空白云飘动代码.zip 微信小程序 - 东航订机票.zip 超大气城市建筑公司模板.zip 侧栏菜单模块化响应式模板.zip 【PHP源码】FreeForm v1.0 汉化版_freeform.zip jQuery游戏人物轮播展示切换代码.zip 微信小程序源码-美人鱼小说;包含前后端 【PHP源码】PHP版免费MP3铃声小偷 v1.0_ring.zip 电子产品CSS企业模板.zip 黄色主题健身会所网站模板.zip html5鼠标悬停图片动画展示效果.zip jQuery页面过渡转换.zip 动漫企业HTML网站模板.zip jQuery点击弹出商品已售罄提示框代码.zip 女性奢侈品商城网站模板.zip 带网上开户表单jQuery焦点图.zip 室内设计效果网页模板.zip 绿色花园CSS网页模板.zip HTML5二手房源网站模板下载.zip spring3、struts2、mybatis结合的一个简单web实现 Apple淡入淡出效果代码.zip 带音乐HTML5圣诞网站模板.zip 淡黄吉袢好运网页模板.zip 教育信息网页模板.zip 个性的js文字洗牌式切换特效.zip jQuery手机端遮罩弹出菜单代码.zip 韩国购物网产品推荐展示效果.zip oldboy Shell高级编程实战第07、08部 视频教程 【ASP.NET源码】迦恩计算机资源网源码(图书销售类) v1.0_jiaen.zip SSH 三大框架制作的购物车 功能 微信小程序源码-运动 蓝色儿童户外网站模板.zip 整齐边框线条APP官网模板.zip jQuery+CSS3立体旋转项目展示代码.zip 基于SSM的住院管理系统 jQuery+HTML5实现滑块特效下载.zip jquery圆形转盘抽奖.zip 织梦dedecms手机wap插件同数据库手机网站.zip 深绿色手机APP开发模板.zip 带日志JS多级目录树结构特效.zip css3网页底部固定导航.zip ACE后台管理界面模板bootstrap.zip 微信小程序源码-cnode社区版 【PHP源码】免费时代[PHP]CMS P1.0_freeshidai.zip jQuery移动端触屏滑动日期控件.zip 女性奢侈品商城模板.zip 带微信和QQ客服的汽车动画特效.zip 鼠标悬停显示分享插件jquery.share.zip jQuery鼠标滑过图片放大显示.zip 【PHP源码】QQ强制视频程序PHP版_666603.zip win8效果右侧网页浮动框代码.zip html5手机端滑动删除添加列表.zip 纯CSS3实现苹果iphone6手机模型特效.zip 学生信息系统springMVC+Maven+Mongodb jQuery图文排版图片预览特效.zip jQuery+CSS3项目模糊效果.zip 纯CSS3实现西洋镜动画特效.zip 百度知道10周年html5特效.zip jQuery拖到滑块选择数字插件.zip 微信小程序 - 招聘.zip 非主流美发时尚网站模板.zip 爱护犬CSS网页模板.zip 【ASP.NET源码】上传图片生成缩略图、图片水印、文字水印_7he7upload.zip 迷你家居CSS网页模板.zip jQuery全屏内嵌焦点图.zip 绿色有机商店html模板.zip 微信小程序源码-早厨 仿阿里巴巴首页jQuery焦点图.zip 微信小程序 - 高仿苹果计算器.zip 仿广州广美整形美容医院移动版手机wap医院网站模板.zip jQuery带播放暂停按钮焦点图代码.zip easyUI和extJS插件和使用说明 宽屏设计公司HTML5模板.zip jQuery仿领英条件筛选菜单代码.zip Discuz! x2.0墨绿风格模板.zip 黑马程序员Apache-Tomcat集群搭建视频教程 jquery鼠标经过图片抖动效果.zip html通过 ajax jsonp跨域请求接收和传送数据 jquery+css3图像标注悬浮说明.zip 【PHP源码】TurboDbAdmin 中文版_turbodbadmin.zip 【ASP.NET源码】风的回忆留言本源码_fengdehuiyi.zip jQuery鼠标悬停边框变换动画特效.zip bootstrap模态框弹出效果.zip jQuery点击图片分裂组合代码.zip NFC支付读取手机开关 jQuery HTML5人物介绍卡片特效.zip 微信小程序源码-小程序版qq客户端【半开发】 大型电商分布式系统实践视频教程 2.54G jQuery+CSS3过渡动画模态窗口特效.zip Admin Panel后台界面框架.zip 企业产品展示网站模板.zip 儿童游泳乐园网站模板.zip JS实现可编辑的表格/增加删除行和列/导出表格/上下移动元素 网站页首可关闭广告条.zip Admin Panel后台界面框架.zip jQuery两组图片滑块展示.zip Android集成主流优秀第三方组件框架 时尚博客CSS网页模板.zip 咨询商务公司html国外模板.zip 仿九块邮触屏版淘宝客单页手机wap购物网站模板.zip 简单栅格主题CSS模板.zip jQuery时间轴幻灯片.zip CSS3 3D立方体扭曲动画.zip 带幻灯片的悬浮QQ在线客服代码.zip 【ASP.NET源码】Jmail发送邮件系统源码_jmailsend.zip wordpress阿里百变XIU主题.zip 仿火车出票效果_自定义View_签到特效 西山居首页jQuery焦点图代码.zip spring定时任务demo包含jar包 ztree样式改成bootstrap风格 黑色炫酷企业项目展示模板.zip HTML5流星雨动画背景特效.zip jQuery带返回顶部右侧浮动导航.zip 床上用品html网站模板.zip 【PHP源码】行业之星多用户开源免费建站系统 v0.60090316_incstar_06090316.zip HTML5手机端问卷答题测试代码.zip jQuery老虎机插件slotmachine.zip 冰蓝清爽主页CSS模板.zip 微信小程序源码-猫途校园签到 jQuery数字按钮切换焦点图.zip 两款jQuery仿flash导航菜单.zip 手工剪纸网页模板.zip PagedDragDropGrid拖拽排序 左侧导航布局CSS网页模板.zip 色彩鲜艳的HTML5商务模板.zip jQuery+CSS3炫酷手风琴特效.zip 响应式设计企业网站模板.zip 课程设计改改可以成毕业时节Jsp管理系统 jQuery网页弹幕插件barrager.zip 支付宝当面付demo jQ大荧幕文字效果.zip 【PHP源码】Brim 2.0.0_brim.zip 微信小程序源码-煎蛋 jQuery横向手风琴效果.zip 绿色技术服务公司网站模板.zip 【PHP源码】易捷域名查询系统v1.0_ej99domainv1.0.zip jquery图片列表瀑布流布局代码.zip 旅游公司宽屏网站模板.zip jQuery流畅动态导航菜单.zip jQuery列表递推手风琴.zip jQuery+HTML5+CSS3绚丽变换组合.zip jquery光标跟随360导航.zip jQuery烟雾背景发生器.zip HTML5 Canvas圆形灯笼时钟动画特效.zip 影视作品展示html5模板.zip spring mvc 初始环境搭建,前后台数据的交互,文件上传 微信小程序源码-云笔记 毕业设计-Struts2+Hibernate4.2+Spring3的房产租赁管理系统 html5+css3计算器样式代码.zip jQuery鼠标滚动3D翻转切换代码.zip jQuery+CSS3全页图片画廊.zip 信用卡表单验证插件Creditly.zip jQuery鼠标滑动切换焦点图代码.zip Java(中国邮政储蓄银行网上个人银行项目总结) 仿安卓手机拨号界面按键特效.zip jQuery鼠标经过弹出圆环菜单代码.zip jQuery评论内容上下滑动切换效果.zip 【ASP.NET源码】HiShop网店代理分销系统 v5.2 Beta 2_hishop.5.2.beta2.zip Hibernate与Spring集成示例源码 jquery自动缩放菜单.zip 棕色卡通帝国cms模板.zip 百度百科目录显示隐藏效果.zip CSS3制作3D图片立方体旋转特效.zip jquery京东商城首页焦点图.zip 【PHP源码】SupeSite 7.0 繁体中文 UTF-8 Build 20090422_supesite7.0_tc_utf8.zip jquery自定义下拉列表.zip jQuery+CSS3人物介绍导航提示效果.zip 网页加载进度条pace插件.zip jquery宽屏渐变幻灯片.zip jQuery图片点击切换插件jCarousel.zip Hadoop大数据零基础实战培训教程 微信小程序源码-报名活动 jquery绿色下拉菜单.zip html5数字模糊滚动变清晰动画特效.zip ssm 权限框架源码 蓝色医疗行业网站模板.zip JSP+MYSQL运动会报名系统 可自定义刻度jQuery进度条.zip jQuery响应式线条滑出列表特效.zip 漂亮的jQuery橙色进度条插件.zip jQuery模拟键盘打字插件typetype.zip Android调用系统的相机,图库以及对相片进行剪切的demo 微信小程序 - 首字母排序选择.zip 红色个性博客CSS网页模板.zip
举报X