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 不能释放内存.
Sep 07 Javascript
javascript 全角转换实现代码
Jul 17 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JS Attribute属性操作详解
May 19 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
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上传文件的增强函数
2010/07/21 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
JavaScript效率调优经验
2009/06/04 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
学习python需要有编程基础吗
2020/06/02 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
小学生安全保证书
2014/02/01 职场文书
接待员岗位责任制
2014/02/10 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
聚美优品广告词改编
2014/03/14 职场文书
丧事主持词
2015/07/02 职场文书
初二数学教学反思
2016/02/17 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
详解JavaScript中Arguments对象用途
2021/08/30 Javascript