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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JavaScript获取路径设计源码
May 22 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 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
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python使用socket远程连接错误处理方法
2015/04/29 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python实现图片中文字分割效果
2019/07/22 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
活动总结格式范文
2014/04/26 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
Python pygame实现中国象棋单机版源码
2021/06/20 Python
golang定时器
2022/04/14 Golang