Jquery中使用setInterval和setTimeout的方法


Posted in Javascript onApril 08, 2013

方法1. 应用jQuery的扩展可以解决这个问题。

$(document).ready(function(){
$.extend({
  show:function(){
   alert("ready");
  }
});
setInterval("show()",3000);
});

方法2. 指定定时执行的函数时不要使用引号和括号。

$(function(){
function show(){
   alert("ready");
}
setInterval(show,3000);// 注意函数名没有引号和括弧! 
// 使用setInterval("show()",3000);会报“缺少对象” 
});

区别:

setTimeout()

从载入后延迟指定的时间去执行一个表达式或者是函数;
      仅执行一次 ;和window.clearTimeout一起使用.

setInterval()

在执行时,它从载入页面后每隔指定的时间执行 一个表达式或者是函数;(功能类似于递归函数);和window.clearInterval一起使用.

补充说明:

这两个方法都可以用来实现在一个固定 时间段之后去执行JavaScript。不过两者各有各的应用场景。

方 法

实际上,setTimeout和 setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是 以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的, setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代 码,而setTimeout只执行一次那段代码。

虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通 过创建一个函数循环重复调用setTimeout,以实现重复的操作:

showTime();
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString ());
    setTimeout("showTime()", 5000);
}

一旦调 用了这个函数,那么就会每隔5秒钟就显示一次时间。如果使用setInterval,则相应的代码如下所示:

setInterval ("showTime()", 5000);
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString ());
}

这两种方法可能看起来非常像,而且显 示的结果也会很相似,不过两者的最大区别就是,setTimeout方法不会每隔5秒钟就执行一 次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着 如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。 而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行 一次那个函数。

如果要求在 每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想 由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处 理时间,那么最好使用setTimeout。

Javascript 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 #Javascript
基于datagrid框架的查询
Apr 08 #Javascript
datagrid框架的删除添加与修改
Apr 08 #Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 #Javascript
jQuery setTimeout()函数使用方法
Apr 07 #Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 #Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 #Javascript
You might like
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php判断表是否存在的方法
2015/06/18 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
python绘制分布折线图的示例
2020/09/24 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
校园文化建设方案
2014/02/03 职场文书
合作意向书格式及范文
2014/03/31 职场文书
助学贷款贫困证明
2014/09/23 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
学习心得体会
2019/06/20 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书