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操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 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大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php计算年龄精准到年月日
2015/11/17 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
简单的Python的curses库使用教程
2015/04/11 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
python实现海螺图片的方法示例
2019/05/12 Python
django中的图片验证码功能
2019/09/18 Python
python3多线程知识点总结
2019/09/26 Python
基于keras中的回调函数用法说明
2020/06/17 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
自主招生自荐信
2013/12/08 职场文书
教师求职信范文分享
2013/12/27 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Python几种酷炫的进度条的方式
2022/04/11 Python
python标准库ElementTree处理xml
2022/05/20 Python