定时执行,在设定时间后会执行代码的内容,如
setTimeout(function(){
console.log('aa')
},1000)
在1秒后(1000毫秒)控制台打印aa
setInterval
每隔设定的时间执行一次代码,如
setInterval(function(){
console.log('aa')
},1000)
每1秒(1000毫秒)在控制台打印aa,直到使用clearInterval停止
JS可以实现很多java代码不易完成的功能。这里学习一些js中的计时器事件。
JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件。
主要通过两个方法来实现:
1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
2.setTimeout() - 暂停指定的毫秒数后执行指定的代码
并且,这两个方法都是window对象的方法。
首先,介绍setInterval()方法,该方法值得是间隔一定的毫秒数不停的执行指定的代码。
语法:window.setInterval(”js代码,函数等“,毫秒数)
实例1:每三秒弹出一个hello
setInterval(function(){alert("Hello")},3000)
实例2:显示当前时间,通过按钮实现时间的停止,开始
<script type="text/javascript">
var myVar
function startTimer(){
/*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/
myVar=setInterval(function(){myTimer()},1000)
}
function myTimer()/* 定义一个得到本地时间的函数*/
{
var d=new Date()
var t=d.toLocaleTimeString()
document.getElementById("demo").innerHTML=t
}
function stopTimer()
{/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/
clearInterval(myVar)
}
</script>
setTimeout() 方法
在html或jsp中
<body>
<h4 id="demo"></h4>
<input type="button" onclick="startTimer()" value="开始">
<input type="button" onclick="stopTimer()" value="停止">
</body>
对于setTimeout()方法,指的是指定的毫秒数后执行指定的代码或方法。
语法:window.setTimeout("javascript 函数",毫秒数)
实例1:3秒钟后弹出”hello“提示框
setTimeout(function(){alert("Hello")},3000)
实例2:三秒钟后跳转到前一个页面
<script type="text/javascript">
setTimeout(function(){
window.history.back()
},3000)
</script>
如何执行停止呢?
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。这里注意myVar必须是一个全局变量。实例如下:
var myVar
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000)
}
function myStopFunction()
{
clearTimeout(myVar)
}
以上就把js计时器的基本功能简要介绍了,具体的使用场景,想要深刻理解,只有到项目用到时方可有新的理会。