关于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 相关文章推荐
Json序列化和反序列化方法解析
Dec 19 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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
redis 队列操作的例子(php)
2012/04/12 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
图解javascript作用域链
2019/05/27 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python中的集合介绍
2019/01/28 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
高考寄语大全
2014/04/08 职场文书
安全承诺书格式
2014/05/21 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
新生入学欢迎词
2015/01/26 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL