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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
js代码实现轮播图
May 04 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
js倒计时抢购实例
2015/12/20 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python中安装django模块的方法
2020/03/12 Python
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
个人主要事迹材料
2014/08/26 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
开会通知短信大全
2015/04/20 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
纪录片信仰观后感
2015/06/08 职场文书
西安事变观后感
2015/06/12 职场文书
大学运动会通讯稿
2015/07/18 职场文书
小学英语课教学反思
2016/02/15 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
python实现双链表
2022/05/25 Python