BOM之定时器

最新推荐文章于 2024-07-25 07:49:46 发布

原创最新推荐文章于 2024-07-25 07:49:46 发布 · 214 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #safari #开发语言

定时器（两种）

window 对象给我们提供了 2 个非常好用的方法-定时器。

setTimeout()
setInterval()

setTimeout() 炸弹定时器

开启定时器

普通函数是按照代码顺序直接调用。

简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。

以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。

示例：

    <script>
        // 回调函数是一个匿名函数
         setTimeout(function() {
             console.log('时间到了');

         }, 2000);
        function callback() {
            console.log('爆炸了');
        }
       // 回调函数是一个有名函数
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
    </script>

案例：5秒钟自动关闭广告

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<img src="../image/tao.png" alt="" class="ad">

<script>

var ad = document.querySelector('.ad');

setTimeout(function() {

ad.style.display = 'none';

}, 5000);

</script>

</body>

</html>

效果如图：

停止计时器：

   <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
       // 开启定时器
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
       // 给按钮注册单击事件
        btn.addEventListener('click', function() {
            // 停止定时器
            clearTimeout(timer);
        })
    </script>