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模块化和命名空间管理的问题说明
Dec 06 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
jquery实现图片预加载
Dec 25 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
原生js实现轮播图特效
May 04 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中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
JavaScript高级程序设计
2006/12/29 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
python读取Android permission文件
2013/11/01 Python
Python实现自动发送邮件功能
2021/03/02 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python实现飞机大战游戏
2020/10/26 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python实现udp聊天窗口
2020/03/31 Python
Python实现画图软件功能方法详解
2020/07/28 Python
幼儿教师研修感言
2014/02/12 职场文书
运动会演讲稿100字
2014/08/25 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL
python数字图像处理:图像简单滤波
2022/06/28 Python