js中的计时器事件`setTimeout()` 和 `setInterval()`
Posted hubufen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中的计时器事件`setTimeout()` 和 `setInterval()`相关的知识，希望对你有一定的参考价值。
js中的计时器事件
在js中，通常会有一些事件，我们需要让它 间隔一段时间之后再发生，或者 每隔一段时间 发生一次，那就需要用到我们js中的计时事件
计时事件主要有两种：
setTimeout()---- 间隔一定的时间之后执行setInterval()----每间隔一定的时间执行一次（重复性执行）
setTimeout()
间隔一定的时间之后`执行指定的语句或函数。
例如：3s后跳转到前一个页面。
<script type="text/javascript">
setTimeout(function(){
window.history.back();
},3000);
</script>也可以采用调用函数的方式
function fn1(){
console.log("你好");
}
setTimeout(fn1,3000);需要注意的是，我们在上述代码中调用函数时调用的整个函数体，而不是函数执行后的结果fn1()
setInterval()
每隔一段时间执行一次指定的语句或函数，是个重复性的操作。
实例1：每隔3s打印一次“hello”
<script type="text/javascript">
setTimeout(function(){
console.log("hello");
},3000);
</script>实例2：显示当前时间，通过按钮实现时间的停止，开始
<body>
<h4 id="demo"></h4>
<input type="button" onclick="startTimer()" value="开始">
<input type="button" onclick="stopTimer()" value="停止">
</body><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>如何执行停止呢？
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码.
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
这里注意myVar必须是一个全局变量。实例如下：
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}以上是关于js中的计时器事件`setTimeout()` 和 `setInterval()`的主要内容，如果未能解决你的问题，请参考以下文章