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 二维数组
Nov 26 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 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中去除所有js,html,css代码
2010/10/12 PHP
php 学习资料零碎东西
2010/12/04 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
javascript一点特殊用法
2008/05/28 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python求列表交集的方法汇总
2014/11/10 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python读取yaml文件的详细教程
2020/07/21 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
银行职员自我鉴定
2014/04/20 职场文书
党建工作先进材料
2014/05/02 职场文书
5s推行计划书
2014/05/06 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
读书笔记怎么写
2015/07/01 职场文书