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. C# DataTable 虚拟Sql临时表，可以做一些处理

    /// <summary> /// 获取临时表-和数据库表一样的的表结构的才可以 /// </summary> /// <param name="SourceT ...

  2. 写一个frida通杀脚本

    1. 前言 过年对我来说和平常没什么区别,该干什么干什么. 之前没接触过 frida 这个工具,前几天用了一些时间学习了一下,相比于 xposed hook 框架,frida 相对于调试方面真的很方便 ...

  3. 这可能是最全的SpringBoot3新版本变化了！

    11月24号,Spring Boot 3.0 发布了第一个正式的 GA 版本,一起看看新版本到底有哪些变化. 2.7版本升级指南 官方提供了一个从 2.7 版本升级到 3.0 的指南:https:// ...

  4. 干电池升压IC或者干电池升压芯片

    1, 干电池升压IC                            升压输出3V,3,3V,5V等3V-5V可调 2, 单节锂电池升压IC                     升压输出4. ...

  5. 手把手教你一套完善且高效的k8s离线部署方案

    作者:郝建伟 背景 面对更多项目现场交付,偶而会遇到客户环境不具备公网条件,完全内网部署,这就需要有一套完善且高效的离线部署方案. 系统资源 编号 主机名称 IP 资源类型 CPU 内存 磁盘 01 ...

  6. [Codeforces Round #841]

    [Codeforces Round #841] Codeforces Round #841 (Div. 2) and Divide by Zero 2022 A. Joey Takes Money J ...

  7. 使用IntelliJ IDEA打开一个项目步骤

    目录 1.普通java项目 步骤一.使用IDEA打开一个新的项目 步骤二.设置项目的SDK 步骤三.设置项目的src为Resources Root​ 2.Maven项目 前三步同普通java项目相同 ...

  8. 再聊一下那 SQLSERVER 行不能跨页的事

    一:背景 1. 讲故事 上一篇写完了之后,马上就有朋友留言对记录行的 8060byte 限制的疑惑,因为他的表记录存储了大量的文章,存储文章的字段类型用的是 nvarchar(max),长度很显然是超 ...

  9. NC14501 大吉大利，晚上吃鸡！

    题目链接 题目 题目描述 最近<绝地求生:大逃杀>风靡全球,皮皮和毛毛也迷上了这款游戏,他们经常组队玩这款游戏. 在游戏中,皮皮和毛毛最喜欢做的事情就是堵桥,每每有一个好时机都能收到不少的 ...

  10. PostgreSQL(02): PostgreSQL常用命令

    目录 PostgreSQL(01): Ubuntu20.04/22.04 PostgreSQL 安装配置记录 PostgreSQL(02): PostgreSQL常用命令 PostgreSQL 常用命 ...