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>
    
  • 相关阅读:
    Centos/Docker/Nginx/Node/Jenkins 操作
    MyBatis 流式查询
    127.0.0.1
    Spring中的@Bean注解
    工厂模式
    webservice
    vs每次拉下一个控件都必选设置为绝对位置才可以移动,怎样解决啊
    ASP.NET AJAX 概述
    AJAX介绍
    时间控件
  • 原文地址:https://www.cnblogs.com/jianjie/p/12179556.html
Copyright © 2011-2022 走看看