zoukankan      html  css  js  c++  java
  • 0179 定时器 之 setTimeout() :开启定时器,5秒后关闭广告案例,停止定时器

    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>
    
  • 相关阅读:
    oracle数据库根据年和月查询出表中 某年某月的数据信息
    分页问题,js之间比较不可以是字符串与字符串比较
    layer.load("试题分析中,可能需要一段时间,请稍后......",0);解析
    编译java程序
    java语言特性
    JDK
    超链接样式属性
    背景样式
    表格合并操作
    表单
  • 原文地址:https://www.cnblogs.com/jianjie/p/12179556.html
Copyright © 2011-2022 走看看