关于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 01 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 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
文件上传程序的全部源码
2006/10/09 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
javascript 寻找错误方法整理
2014/06/15 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python检测IP地址变化并触发事件
2018/12/26 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python 实现有道翻译功能
2021/02/26 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
火车来了教学反思
2014/02/11 职场文书
超市周年庆活动方案
2014/08/16 职场文书
鸡毛信观后感
2015/06/11 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript