javascript中定时器的使用
Posted faraway2004
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript中定时器的使用相关的知识，希望对你有一定的参考价值。
定时器又称为延迟器，会在某个时间以后执行指定的代码
语法：
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>
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>
运行效果
以上即为javascript中定时器的简单介绍，需要在实际运用中仔细体会。
以上是关于javascript中定时器的使用的主要内容，如果未能解决你的问题，请参考以下文章
调用 invalidate() 时计时器在 Android 中不起作用
如何在 Reactjs 中将数据从子组件传递到父组件？ [复制]