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()`的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中BOM简介及其对象js执行机制

js定时器之setTimeout的使用

setTimeout()与setInterval()方法区别介绍

定时器

Node.js-提供了四种形式的定时器

js事件循环 microtask macrotask