setInterval()

作用

 这个函数可以将一个函数每隔一段时间执行一次

参数

 1.回调函数，该函数会每隔一段时间被调用一次

 2.每次调用间隔的时间，单位是毫秒

返回值

 返回一个Number类型的数据,这个数字用来作为定时器的唯一标识

使用

写法一：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

			window.onload = function(){

				//获取count

				var count = document.getElementById("count");

				var num = 1;

				var timer = setInterval(function(){

					count.innerHTML = num++;

					if(num == 11){

						//关闭定时器

						clearInterval(timer);

					}

				},1000);

				//clearInterval()可以用来关闭一个定时器

				//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

				//clearInterval(timer);

			};

		</script>

	</head>

	<body>

		<h1 id="count"></h1>

	</body>

</html>

写法二：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

			window.onload = function() {

				var c = document.getElementById("count");

				var num = 1;

				var fun = function() {

					c.innerHTML = num++;

					if (num == 11) {

						//关闭定时器

						clearInterval(timer);

					}

				}

				var timer = setInterval(fun, 1000);//这种方式fun一定不能写成fun()

			};

		</script>

	</head>

	<body>

		<h1 id="count"></h1>

	</body>

</html>

写法三：

每隔一段时间调用一次某对象中的某方法

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

			var count = null;//由于count声明为window全局变量，所以下面两种调用方式都可以

                        //如果不声明为全局变量，则只能使用 setInterval(count.fun, 1000); 的调用方式

			window.onload = function() {

				c = document.getElementById("count");

				var num = 1;

				var timer = null;

				function Count() {

					this.fun = function() {

						c.innerHTML = num++;

						if (num == 11) {

							//关闭定时器

							clearInterval(timer);

						}

					}

				}

				count = new Count();//为count赋值

				timer = setInterval('count.fun()', 1000);//调用Count对象的fun()方法，这里的fun后面必须跟（）

                              //timer = setInterval(count.fun, 1000);//调用Count对象的fun()方法，这里的fun后面不能加 ()

			};

		</script>

	</head>

	<body>

		<h1 id="count"></h1>

	</body>

</html>

写法四：

调用某全局方法

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

			var count = null;

			var num = 1;

			var timer = null;

			var c=null;//这里必须把c声明为全局属性，

			var fun = function() {

				c.innerHTML = num++;

				if (num == 11) {

					//关闭定时器

					clearInterval(timer);

				}

			}

			window.onload = function() {

				c = document.getElementById("count");

				timer = setInterval('fun()', 1000);

                                //timer = setInterval(fun, 1000);

			};

		</script>

	</head>

	<body>

		<h1 id="count"></h1>

	</body>

</html>

写法五

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

			window.onload = function() {

				var c = document.getElementById("count");

				var num = 1;

				var fun = function() {

					c.innerHTML = num++;

					if (num == 11) {

						//关闭定时器

						clearInterval(timer);

					}

				}

				var timer = setInterval(function(){

					fun();

				}, 1000);

			};

		</script>

	</head>

	<body>

		<h1 id="count"></h1>

	</body>

</html>

总结

1.setInterval()该方法能每隔一段时间调用某个方法

2.如果传入setInterval()方法中的是函数对象是局部函数，调用方式为：setInterval(fun,time); fun后面不能接括号

3.如果传入setInterval()方法中的是函数对象是全局函数，调用方式有两种：

一：setInterval(fun,time); fun后面不能接括号

二：setInterval('fun()',time); fun后面必须带括号

setInterval()的使用的更多相关文章

  1. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  2. 你所不知道的setInterval

    在你所不知道的setTimeout记载了下setTimeout相关,此篇则整理了下setInterval:作为拥有广泛应用场景(定时器,轮播图,动画效果,自动滚动等等),而又充满各种不确定性的这set ...

  3. 深入理解定时器系列第一篇——理解setTimeout和setInterval

    × 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...

  4. 前端开发：setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  5. javascript函数setInterval和setTimeout的使用区别详解

    setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...

  6. setTimeout和setInterval从入门到精通

    我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...

  7. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  8. JS中SetTimeOut和SetInterval方法的区别？

    1.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 ...

  9. setTimeout 和 setInterval 的区别

    setTimeout (表达式,延时时间)setInterval(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout   在执行时,是在载入后延迟指定时间 ...

  10. 关于setInterval()你所不知道的地方

    前言:1.使用setInterval()的定时器会把事件运行的时间也包含在内,如果要精确算定时两个任务之间的时间,可以使用setTimeout()替换.2.当异步事件发生时,如mouse click, ...

随机推荐

  1. 1.3 Apache Hadoop的重要组成-hadoop-最全最完整的保姆级的java大数据学习资料

    目录 1.3 Apache Hadoop的重要组成 1.3 Apache Hadoop的重要组成 Hadoop=HDFS(分布式文件系统)+MapReduce(分布式计算框架)+Yarn(资源协调框架 ...

  2. Go | 闭包的使用

    闭包基本介绍 闭包就是 一个函数 和其相关的 引用环境 组合的一个整体 好处: 保存引用的变量,下次继续使用,不会销毁 下面通过闭包的方式,写一个数字累加器,体验一下闭包的妙处 闭包实现数字累加 pa ...

  3. python2和python3的区别(1)

    1.python2和python3的解释器的默认编码不同 python2解释器的编码默认用的是 ascii python3解释器的编码默认用的 utf-8 2.python2和python3输入的表示 ...

  4. 自定义RBAC（4）

    您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 前面把RBAC的权限系统设计过程都讲清楚了,现在就来实现它.大致分这么几个步骤: 1.先定义出完整的权限系统表结构: 2.实现Entity.Da ...

  5. 现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！

    在上一篇文章中 -- 现代 CSS 之高阶图片渐隐消失术,我们借助了 CSS @Property 及 CSS Mask 属性,成功的实现了这样一种图片渐变消失的效果: CodePen Demo -- ...

  6. 常用内置模块之collections模块、时间模块、随机数random模块

    今日内容回顾 目录 今日内容回顾 包的具体使用 编程思想的转变 软件开发目录规范 常用内置模块之collections模块 常用内置模块之时间模块 常用内置模块之随机数random模块 报的具体使用 ...

  7. 组策略编辑器（gpedit.msc）找不到文件解决方法

    打开[此电脑]中的C盘,依次打开Windows-system32-gpedit.msc,或者输入:C:\Windows\System32\gpedit.msc,查看是否存在gpedit.msc文件(没 ...

  8. 浅谈入行Qt桌面端开发程序员-从毕业到上岗（1）：当我们说到桌面端开发时，我们在谈论什么？

    谈谈我自己 大家好,我是轩先生,是一个刚入行的Qt桌面端开发程序员.我的本科是双非一本的数学专业,22年毕业,只是部分课程与计算机之间有所交叉,其实在我毕业的时候并没有想过会成为一名程序员,也没有想过 ...

  9. 【QT开发问题】使用自定义的QGroupBox，重写绘图事件paintEvent后边框消失的问题

    问题描述 Qt界面开发过程中,使用自定义的QGroupBox,重写绘图事件paintEvent时,出现边框被覆盖的情况,或边框消失的问题. 左图是原始状态,直接重写绘图事件后,会变成右图空白状态.   ...

  10. virtualenv 配置(windows)

    1.在线安装 virtualenv pip install virtualenv 2.离线安装 下载virtualenv包,解压并进入setup.py所在文件夹中 python setup.py in ...