jQuery setTimeout传递字符串参数报错的解决方法


Posted in Javascript onJune 09, 2014

当你打算调用一些jQuery代码显示隐藏的一个元素,并调用setTimeout()在一段延时之后设置其HTML的内容:

整个页面的代码是这样的.

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<a href="#" id='heihei' onclick="showNext('I am veinei ')">show next</a> 
<a href="#" id="log" style="display:none" >yes,I am the next </a> 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
function showNext(text){ 
setTimeout("$('#log').show().text(text)",1000); 
} 
</script> 
</body> 
</html> 
</span>

.show()确实调用成功了.但是.text()调用失败了.console显示 text未定义.

对于这个问题,我确实没有找到更好的答案...我想是不是jQuery对这个传入setTimeout()函数的内容做了修改导致变量失效.

我紧接着做了下一个实验.

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<a href="#" id='heihei' onclick="showNext('I am veinei ')">show next</a> 
<a href="#" id="log" style="display:none" >yes,I am the next </a> 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
function showNext(text){ 
setTimeout("alert(text)",1000); 
} 
</script> 
</body> 
</html> 
</span>

我要看看是不是确实是jQuery出了问题.得到的是同样的错误.

后来找了本书看了看.发现了问题的所在.

setTimeout() 接受一个字符串参数时,它执行于全局作用域,也就是说,它位于任何函数之外.最简单的修复手段就是使用一个局部函数(匿名函数)来解决这个问题.

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<a href="#" id='heihei' onclick="showNext('I am veinei ')">show next</a> 
<a href="#" id="log" style="display:none" >yes,I am the next </a> 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
function showNext(text){ 
setTimeout(function(){$('#log').show().text(text);},1000); 
} 
</script> 
</body> 
</html> 
</span>

成功解决这个问题.
Javascript 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
js中!和!!的区别与用法
May 09 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 #Javascript
Node.js(安装,启动,测试)
Jun 09 #Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 #Javascript
javascript浏览器兼容教程之事件处理
Jun 09 #Javascript
jQuery学习笔记之toArray()
Jun 09 #Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 #Javascript
jQuery简易图片放大特效示例代码
Jun 09 #Javascript
You might like
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
javascript生成大小写字母
2015/07/03 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
致长跑运动员加油稿
2014/02/20 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js