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. .NET周报【11月第3期 2022-11-22】

    国内文章 .NET Conf China 2022 第一批讲师阵容大揭秘!整个期待了! https://mp.weixin.qq.com/s/4p89hhBPw6qv-0OB_T_TOg 目光看过来 ...

  2. PyTorch Geometric Temporal 介绍 —— 数据结构和RGCN的概念

    Introduction PyTorch Geometric Temporal is a temporal graph neural network extension library for PyT ...

  3. JVM面试点汇总

    JVM面试点汇总 我们会在这里介绍我所涉及到的JVM相关的面试点内容,本篇内容持续更新 我们会介绍下述JVM的相关面试点: JVM内存结构 内存溢出问题 方法区与永久代和元空间 JVM内存参数 JVM ...

  4. 论文解读（CDTrans）《CDTrans: Cross-domain Transformer for Unsupervised Domain Adaptation》

    论文信息 论文标题:CDTrans: Cross-domain Transformer for Unsupervised Domain Adaptation论文作者:Tongkun Xu, Weihu ...

  5. 在Maven中出现javax.mail中文乱码问题解决记录

    学习Java时,看廖雪峰大神文章使用了javax.mail来发送SMTP邮件.在加入中文时,发现收到的邮件里中文都是乱码. 按照一般经验,多半是编码的问题.然而在代码中,会涉及到编码的地方已经全部设置 ...

  6. 现代 CSS 高阶技巧，不规则边框解决方案

    本文是 CSS Houdini 之 CSS Painting API 系列第四篇. 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 现代 CSS ...

  7. java逻辑运算中异或^

    本文主要阐明逻辑运算符^(异或)的作用 a ^ b,相异为真,相同为假. 注意,异或运算,还能交换两个变量. int a = 1; int b = 2; System.out.println(&quo ...

  8. 正则提取器和beanshell处理器组合，将提取的所有id拼接成字符串

    1.添加正则表达式,提取所有id值 2.添加beanshell处理器将所有的id值拼接成字符串 方法一: int N = Integer.parseInt(vars.get("build_m ...

  9. python 之选择结构(if --elif --else)

    python中有三种结构:顺序结构.选择结构.循环结构,此处介绍选择结构. if -- else 结构: if 判断条件: 执行语句 else: 执行语句 当if后面的判断条件为真(True)时,执行 ...

  10. nuxt.js框架 如何打包 build

    nuxt脚手架开发好项目后怎么打包 以下是脚手架的package.json部分代码 "scripts": { "dev": "cross-env NO ...