js中的计时器事件`setTimeout()` 和 `setInterval()`
2019-05-19 10:49
2116 查看
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_window.setInterval & window.setTimeout
- 【JS/辨析】js中的计时器:setTimeout & setInterval
- js 多线程 setTimeout setInterval
- js中setInterval/clearInterval与setTimeout/clearTimeout
- js事件循环、window.setTimeout 延迟执行
- js setTimeout and setInterval
- JS setInterval setTimeout的用法
- 关于js setInterval setTimeout
- js中setInterval/clearInterval与setTimeout/clearTimeout
- js setInterval setTimeout 方法区别
- JS setTimeout setInterval
- 让JavaScript中计时器setTimeout/setInterval的回调方法支持参数传递
- js setTimeout 和 setInterval
- JS setTimeout setInterval
- JS黑魔法之this, setTimeout/setInterval, arguments
- js setTimeout和setInterval
- js setTimeout()函数介绍及应用以倒计时为例
- JS setInterval() 与 clearInterval() 方法的使用
- js(引用类型和setTimeout scope)
- setInterval & setTimeout