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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 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
10个实用的PHP代码片段
2011/09/02 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
javascript常用的设计模式
2017/02/09 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python实现处理管道的方法
2015/06/04 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
python 自定义对象的打印方法
2019/01/12 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
一年级学生评语
2014/04/23 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
关于美容院的活动方案
2014/08/14 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2015大一新生军训感言
2015/08/01 职场文书
《灰雀》教学反思
2016/02/19 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript