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. “XZ”格式文件解压

    1.下载xz 官网:https://tukaani.org/xz/ 例:wget https://nchc.dl.sourceforge.net/project/lzmautils/xz-5.2.6. ...

  2. js-day01-商品订单信息

    学会表格表单(html+css) 表格的默认CSS属性 *{             margin: 0;             padding: 0;         }         tabl ...

  3. 用excel表画一个乐高

    一.背景:在商场看到一个超级玛丽的乐高图感觉使用excel的颜色填充也能画出来,并且可以借助python来实现 二.excel表如何绘制正方形:1.统一设置行高与列宽excel表单元格的行与列的默认计 ...

  4. 【每日一题】【递归+int型返回值最后不接收】110. 平衡二叉树-211231/220221

    给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 . 答案: public class Solution ...

  5. flutter系列之:flutter中的变形金刚Transform

    目录 简介 Transform简介 Transform的使用 总结 简介 虽然我们在开发APP的过程中是以功能为主,但是有时候为了美观或者其他的特殊的需求,需要对组件进行一些变换.在Flutter中这 ...

  6. SQL语句使用

    目录 一:sql语句 1.什么是SQL语句? 二:基本SQL语句之库操作 三:基本SQL语句之表操作 1.查看当前所在库名称 2.切换数据库 四:基本SQL语句之记录操作 五:创建表的完整语法 六:操 ...

  7. Qt开发Active控件:如何使用ActiveQt Server开发大型软件的主框架（2）

    Qt开发Active控件:如何使用ActiveQt Server开发大型软件的主框架 注:本文更多地是带着如何去思考答案,而不是纯粹的放一个答案上来,如果你需要直接看到完整的答案,请直接看实例和最后的 ...

  8. Redux与前端表格施展“组合拳”，实现大屏展示应用的交互增强

    Redux 是 JavaScript 状态容器,提供可预测化的状态管理.它可以用在 react.angular.vue 等项目中, 但与 react 配合使用更加方便一些. Redux 原理图如下,可 ...

  9. Java用户交互方法——Scanner

    Scanner用户交互 使用Next方法接收 Scanner scanner = new Scanner(System.in); if(scanner.hasNext()){//判断用户有无输入 St ...

  10. 【Java刷题】初始化List应该选择ArrayList还是LinkedList

    文章目录 前言 题目 解题思路 遇到的坑:ArrayList和LinkedList 未通过代码 通过代码 小结 ArrayList和LinkedList的区别 在刷题的时候应该如何选择 排序效率 测试 ...