关于setInterval、setTimeout在jQuery中的使用注意事项


Posted in Javascript onSeptember 28, 2011

以前写定时器的时候,总是习惯直接

setInterval("fn()",2000);
最近碰到个问题,在使用jquery写定时器时,总是会出现fn不存在的错误提示,如下

$(function(){setInterval("fn()",2000);})
解决方法是去掉引号和括号,采用最原始的方法

$(function(){setInterval(fn,2000);})
另外一种就是在书写jq的扩展,如下

$(function(){ 
$.extend({ 
fn:function(){ 
alert("im fn!"); 
} 
}); 
setInterval("$.fn()",2000); 
});

以上写法都是没什么问题的。但是如果需要传递参数该如何?

像上面第一种写法,

$(function(){setInterval(fn,2000);})
如果写成

$(function(){setInterval(fn(para),2000);})
就报错了。这个比较经典,比较白痴。

这时你可以内置一个function,写成

$(function(){setInterval(function(){fn(para)},2000);})
这样也是可以的。

至于第二种方法如何传递,这就更简单了,我就不多说了。

发到博客仅当记忆使用,都是基础啊!也是初学者容易犯错的地方!

//========================

还是补充下第二种传参的方法。

先看段代码

$(function(){ 
$start = 1; 
$.extend({ 
a:function(t){ 
$index = t; 
alert($index); 
$start++; 
} 
}); 
setInterval("$.a("+$start+")",2000); 
});

有一些人会尝试这么去写,结果是什么?结果就是alert出来的,一直是1,不会增加。这里需要注意的是setInterval里面的第一个参数,这是一个语句,用双引号括了起来,里面的东西会被解释成变量。如果按照上面的写法,相当于

setInterval("$.a(1)",2000);
那么结果也就无可厚非了。正确的写法,当然是这样

$(function(){ 
$start = 1; 
$.extend({ 
a:function(t){ 
$index = t; 
alert($index); 
$start++; 
} 
}); 
setInterval("$.a($start)",2000); 
});

这时$start才会被解释成变量。语句相当于function(){a(变量)},而不是function(){a(值)}。
Javascript 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
实例分析js事件循环机制
Dec 13 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 #Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 #Javascript
一个挺有意思的Javascript小问题说明
Sep 26 #Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 #Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 #Javascript
在Windows上安装Node.js模块的方法
Sep 25 #Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 #Javascript
You might like
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
Prototype Number对象 学习
2009/07/19 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python错误处理操作示例
2018/07/18 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
六一节目主持词
2014/04/01 职场文书
现实表现证明材料
2015/06/19 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技