关于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静态的url如何传递
May 03 Javascript
input 高级限制级用法
Mar 26 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
详解React 条件渲染
Jul 08 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
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
使用js画图之画切线
2015/01/12 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
JavaScript中的"=、==、==="区别讲解
2019/01/22 Javascript
图解javascript作用域链
2019/05/27 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python中黄金分割法实现方法
2015/05/06 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
在Python中表示一个对象的方法
2019/06/25 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python实现一个优先级队列的方法
2020/07/31 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
班组长岗位职责
2014/03/03 职场文书
年底个人总结范文
2015/03/10 职场文书
南极大冒险观后感
2015/06/05 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python