js中的计时器事件`setTimeout()` 和 `setInterval()`

时间 2020-06-22

标签计时器事件 settimeout setinterval 栏目 JavaScript 繁體版

原文原文链接

`js`中的计时器事件

在js中，一般会有一些事件，咱们须要让它 间隔一段时间以后再发生，或者 每隔一段时间 发生一次，那就须要用到咱们js中的计时事件javascript

计时事件主要有两种：html

setTimeout() ---- 间隔必定的时间以后执行
setInterval() ----每间隔必定的时间执行一次（重复性执行）

setTimeout()

间隔必定的时间以后`执行指定的语句或函数。例如：3s后跳转到前一个页面。java

<script type="text/javascript">
    setTimeout(function(){
            window.history.back();
    },3000);
</script>

也能够采用调用函数的方式函数

function fn1(){
			console.log("你好");
		}
		setTimeout(fn1,3000);

须要注意的是，咱们在上述代码中调用函数时调用的整个函数体，而不是函数执行后的结果fn1()spa

setInterval()

每隔一段时间执行一次指定的语句或函数，是个重复性的操做。实例1：每隔3s打印一次“hello”code

<script type="text/javascript">
    setTimeout(function(){
           console.log("hello");
    },3000);
</script>

实例2：显示当前时间，经过按钮实现时间的中止，开始htm

<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);
    }