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. i春秋破译

    点开题目就是一段密文 TW5650Y - 0TS UZ50S S0V LZW UZ50WKW 9505KL4G 1X WVMUSL510 S001M0UWV 910VSG S0 WFLW0K510 1 ...

  2. [最短路径问题]Dijkstra算法(含还原具体路径)

    前言 在本篇文章中,我将介绍 Dijkstra 算法解决 单源最短路径问题 ,同时还包含了具体路径的还原.以下是我自己的全部学习过程与思考,参考书籍为 <数据结构>(C++语言版) 邓俊辉 ...

  3. 关于sublime-build的配置详解

    前言 sublime-build 可以做很多自定义的构建命令,然后用其执行代码,十分方便! 开始 这里我就简单的用python 的配置来详细说明各个配置项目的作用 { "shell_cmd& ...

  4. MYSQL快速安装整理

    参考教程:https://www.cnblogs.com/brad93/p/16650780.html [检查是否已安装过] find / -name mysql [快速安装开始] groupadd  ...

  5. 【实时数仓】Day05-ClickHouse：入门、安装、数据类型、表引擎、SQL操作、副本、分片集群

    一.ClickHouse入门 1.介绍 是一个开源的列式存储数据库(DBMS) 使用C++编写 用于在线分析查询(OLAP) 能够使用SQL查询实时生成分析数据报告 2.特点 (1)列式存储 比较: ...

  6. UIAutomator测试框架介绍

    uiautomator简介 UiAutomator是Google提供的用来做安卓自动化测试的一个Java库,基于Accessibility服务.功能很强,可以对第三方App进行测试,获取屏幕上任意一个 ...

  7. 《MySQL必知必会》之快速入门存储过程

    使用存储过程 本章介绍什么是存储过程,为什么使用.如何使用,并介绍如何创建和使用存储过程的基本语法 存储过程 在实际应用中,往往需要执行多个表的多条sql语句 存储过程就是为以后的使用而保存的一条或者 ...

  8. java中的动态绑定机制

    本文主要讲述java中的动态绑定机制. 老韩ppt关于动态绑定机制: 示例代码如下: public class DynamicBinding { public static void main(Str ...

  9. java中的递归机制

    本文主要讲述java中的递归机制. 示例1,递归代码如下: public class Recursion01 { public static void main(String[] args) { T ...

  10. JavaScript：七大基础数据类型：大整数bigint

    因为数值number有表示范围,所以当我们需要精确表示更大的数字时,我们需要用到大整数bigint: 事实上,大整数可以精确表示任意长度的整数: 我们可以通过在整数的末尾添加字母n,来声明它是一个大整 ...