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>
上面使用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>

运行效果


以上即为javascript中定时器的简单介绍,需要在实际运用中仔细体会。


以上是关于javascript中定时器的使用的主要内容,如果未能解决你的问题,请参考以下文章

调用 invalidate() 时计时器在 Android 中不起作用

传奇脚本计时问题!

如何在 Reactjs 中将数据从子组件传递到父组件? [复制]

计时器从 Notification RemoteViews 中的特定值开始

使用 Vowpal Wabbit 时计算 AUC

SQL:使用 LIMIT 查询时计算匹配结果的数量