码迷,mamicode.com
首页 > 其他好文 > 详细

0179 定时器 之 setTimeout() :开启定时器,5秒后关闭广告案例,停止定时器

时间:2020-01-11 13:10:36      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:inf   log   settime   png   art   clear   元素   callback   图片   

1、开启定时器

技术图片

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

【我的理解:`当某种条件发生时,回头调用的函数`。】

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

以前我们讲的 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>

2、案例:5秒后关闭广告

技术图片

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        // 获取要操作的元素
        var ad = document.querySelector('.ad');
        // 开启定时器
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

3、停止定时器

技术图片

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

0179 定时器 之 setTimeout() :开启定时器,5秒后关闭广告案例,停止定时器

标签:inf   log   settime   png   art   clear   元素   callback   图片   

原文地址:https://www.cnblogs.com/jianjie/p/12179556.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!