javascript中定时器的使用

最新推荐文章于 2024-07-02 09:25:06 发布

faraway2004

最新推荐文章于 2024-07-02 09:25:06 发布

阅读量757

点赞数 1

分类专栏： javascript 文章标签： javascript 定时器 setTimeout setInterval clearInterval

本文链接：https://blog.csdn.net/u011526599/article/details/51419891

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

定时器又称为延迟器，会在某个时间以后执行指定的代码

语法：

Vartimer=setTimeout(‘表达式’,’毫秒’);

表现在指定的毫秒数后执行前面的表达式

如果需要反复执行某一个程序，还可以使用setInterval

经过测试，我们发现，setInterval会反复执行，setTimeout只执行一次

setTimeout语句执行时，会被反复编译

setInterval语句执行时，只会编译一次

1.概述

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
SetInterval为自动重复，setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
使用定时器实现JavaScript的延期执行或重复执行
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
其中，expression可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds，表示延时或者重复执行的毫秒数。下面分别介绍两种方法。

2.使用setTimeout和SetInterval

timer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'inlineBinding.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//使用document
function display(){
	alert('Hello!');
}
//setTimeout('alert("Hello!")',3000);
//setTimeout('display()',3000);
setInterval('display()',3000);
</script>
  </head>
  
  <body>
</body>
</html>

上面使用setTimeout的效果为3s后会alert，使用SetInterval的效果为，每隔3s会alert

3.清除定时器

动画执行时，如果想关闭动画的执行，可以调用clearTimeout来清除定时器对象

该方法接收一个id，表示一个定时器。这个id是由setTimeout方法返回的

Var timer=setTimeout();

clearTimeout(timer);

clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如：

//定义一个反复执行的调用
var id=window.setInterval("somefunction",10000);
//取消定时执行
window.clearInterval(id);

4.计时器的简单实现

需求：实现一个在线计时器，显示当前时间，点击“开始”按钮时开始计时，点击“结束”按钮时计时停止

timer2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'inlineBinding.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
//使用document
function display(){
	var content = document.getElementById("text");
	content.value=new Date();
}
//setTimeout('alert("Hello!")',3000);
//setTimeout('display()',3000);
//setInterval('display()',3000);
//使用timer
window.οnlοad=function(){
	var timer;
	document.getElementById("start").οnclick=function(){
		timer = setInterval('display()',1000);
	};
	document.getElementById("stop").οnclick=function(){
		clearInterval(timer);
	};
};
</script>
  </head>
  
  <body>
  <input type="text" valie="" id="text"/>
  <input type="button" value="开始" id="start"/>
  <input type="button" value="结束" id="stop"/>
</body>
</html>

运行效果

5.实现div的自动运动

需求：在页面中，放一个div，让div从窗口左上角浮动至右下角

useEvent2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'inlineBinding.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
function display(){
	var content = document.getElementById("content");
	content.style.left = (parseInt(content.style.left)+10)+'px';
	content.style.top = (parseInt(content.style.top)+10)+'px';
}
//通过使用event实现控制div移动
window.οnlοad=function(){//使用定时器
	setInterval('display()',1000);
};
</script>
  </head>
  
  <body>
  <input type="text" id="text"/><br>
  <div id="content" style="width: 100px;height: 100px;background: red;position: absolute;left: 10px;top: 10px;">text</div>
</body>
</html>

运行效果