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 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
微信小程序 标签传入数据
May 08 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 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之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
js变换显示图片的实例
2013/04/16 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python第三方库学习笔记
2020/02/07 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
英语教学随笔感言
2014/02/20 职场文书
婚前协议书范本
2014/10/27 职场文书
稽核岗位职责范本
2015/04/13 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Python使用Kubernetes API访问集群
2021/05/30 Python