关于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 相关文章推荐
尽可能写"友好"的"Javascript"代码
Jan 09 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
Jquery $when done then的用法详解
May 20 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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
第三节 定义一个类 [3]
2006/10/09 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python反射的用法实例分析
2018/02/11 Python
python的re模块使用方法详解
2019/07/26 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
python使用列表的最佳方案
2020/08/12 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
大型演出策划方案
2014/05/28 职场文书
新法人代表任命书
2014/06/06 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
黄埔军校观后感
2015/06/10 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS