认识JS计时器

最新推荐文章于 2023-11-17 16:59:42 发布

weixin_46382155

最新推荐文章于 2023-11-17 16:59:42 发布

阅读量226

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46382155/article/details/105018356

版权

要使用JS计时器，只需要使用JS内置的两个函数。

第一个：window.setInterval()

第二个：window.clearInterval()

当JS读到 window.setInterval(函数A，时间A) 的时候，就会产生计时器，每个一隔段时间A，就执行函数A，不断重复。

例子：自动执行

    <script>
        window.setInterval(function(){console.log(1);}, 1000);
    </script>

上面的例子里面，每隔1000毫秒，也就是1秒，就会执行function(){console.log(1);},的内容一遍，在控制台输出1。

直接放在<script>标签里面，只要页面一加载，window.setInterval()，这个函数就会重复执行。

例子：事件触发

<body>
    <input type="button" value="start" onclick="start()">
    <script>
        function start() {
            window.setInterval(function(){
                console.log(1);
            }, 1000);
        }
    </script>
</body>

在<body>标签里面加入一个<input>标签，加上属性οnclick="start()"。表示点击按钮的时候，就会执行start()函数里面的内容。

例子：暂停计时器

<body>
    <input type="button" value="start" onclick="start()">
    <input type="button" value="stop" onclick="stop()">

    <script>
        
        var timer;
        function start() {
            timer = window.setInterval(function(){
                console.log(1);
            }, 1000);
        }

        function stop(){
            window.clearInterval(timer);
        }
    </script>
</body>

在<body>标签里面加入另外一个<input>标签，加上属性οnclick="stop()"。表示点击的守候，就会执行stop()函数里面的内容。

重点：

先声明一个全局变量，用来存放计时器的返回值，那是计时器编号，用来代表那个计时器。

window.clearInterval()函数就是用来暂停计时器，参数是计时器编号。在这个例子里面，只要点击stop按钮，就会执行stop()函数的内容，内容只有一句话，暂停指定计时器编号的计时器。