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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 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 cron中的批处理
2008/09/16 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python正则实现提取电话功能
2018/02/24 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
学生期末评语大全
2014/04/30 职场文书
银行求职信范文
2014/05/26 职场文书
个人收入证明模板
2014/09/18 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
校长师德表现自我评价
2015/03/04 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python