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 相关文章推荐
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
详解ES6系列之私有变量的实现
Nov 21 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 setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
js同源策略详解
2015/05/21 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
自荐信包含哪些内容
2013/10/30 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
秋季运动会稿件
2014/01/30 职场文书
品牌宣传方案
2014/03/21 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
导游词之唐山景点
2019/12/18 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Python OpenCV超详细讲解基本功能
2022/04/02 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript