JavaScript浏览器对象——计时器

最新推荐文章于 2024-04-09 14:07:00 发布

微风滋滋

最新推荐文章于 2024-04-09 14:07:00 发布

阅读量433

点赞数 1

分类专栏： JS浏览器对象文章标签： javascript

本文链接：https://blog.csdn.net/qq_51227484/article/details/118712550

版权

JS浏览器对象专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.计时事件：

通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件。

2.计时方法：

1)：setInterval() - 间隔指定的毫秒数不停的执行指定的代码

clearinterval() 方法用于停止 setInterval() 方法执行的函数代码

<button id='btn' onclick="stopTime()">按钮</button>
<p id="ptime"></p>
<script>
    //定义一个简单的计时器
    var myTime = setInterval(() => {
       getTime();
    }, 1000);
    
    function getTime(){
       var d = new Date();
       var t = d.toTimeString();
       document.getElementById('ptime').innerHTML = t;
    }
    //简单的一个停止的方法
    function stopTime(){
       clearInterval(myTime);
    }
</script>

上面我们简单使用 setInterval() 定义了一个计时器用来代表一个代码的一直运行，当我们运行成功的时候浏览器上面就会有时间信息出现，然后按照定义的每隔1000毫秒刷新一次（也就是一秒），然后使用 clearinterval() 定义一个停止的方法，然后在点击按钮的时候运行这个方法，我们就可以在浏览器上面点击一下按钮，上面的计时器就会停止运行。

2)：setTimeout() - 暂停指定毫秒数后执行指定的代码

clearTimeout() 方法用于停止执行setTimeout() 方法的函数代码

<button onclick="myWin()">按钮</button>
    <script>
        var win;
        function myWin(){
            win = setTimeout(() => {
                alert('hello');
            }, 3000);
        }
</script>

就简单的设置了一个方法，里面对 setTimeout() 方法进行使用，并弹出一个对话框，设置时间为执行后的3000毫秒（即三秒），将这个方法给button，然后点击一下按钮就可以执行，浏览器中间过三秒就会弹出一个对话框。

<button onclick="myWin()">按钮</button>
    <script>
        var win;
        function myWin(){
            alert('hello');
            win = setTimeout(() => {
                myWin()
            }, 3000);
        }
</script>

上面我们简单的将代码修改了一下，让setTimeout() 一直调用 myWin() 方法就会发现，放你点击了按钮之后，每隔三秒钟就会弹出一个对话框。

//使用 onload 直接加载
<body onload="myWin()"> 
    <button onclick="stopWin()">按钮</button>
    <script>
        var win;
        function myWin(){
            alert('hello');
            win = setTimeout(() => {
                myWin()
            }, 3000);
        }
        function stopWin(){
            clearTimeout(win);
        }
    </script>
</body>

上述就是对 setTimeout() 方法的直接 onload 加载，然后将 clearTimeout() 的方法作用与 onclick 上面，就是我们进入浏览器的时候，每个三秒就会弹出一个对话框，然后点击按钮之后就会终止。

总而言之：上面的两个不同的计时方法，setInterval() 方法是运行后间隔相应的时间，就会无限地执行这个代码，但是 setTimeout() 方法在运行后就会执行代码，可能是一次，也可能是无限次，这个就要看方法本身在执行的过程中有没有进行自身调用，上面我就简单的举例了一下，一个是单纯的调用，另一个是自身调用用来实现 setTimeout() 方法的效果。

微风滋滋

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript浏览器对象——计时器

1.计时事件：通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件。2.计时方法： 1)：setInterval() - 间隔指定的毫秒数不停的执行指定的代码 clearinterval() 方法用于停止setInterval() 方法执行的函数代码<button id='btn' onclick="stopTime()">按钮&l...
复制链接

扫一扫