首页 > 其他分享> 文章详细

BOM 定时器+回调函数

2021-11-13 21:01:01 阅读：131 来源： 互联网

标签：function 调用函数定时器 BOM var setTimeout

window对象提供了两种定时器：setTimeout()和setInterval()

1.setTimeout()定时器 　　window.setTimeout(调用函数,[延迟的毫秒数]);

用于设置一个定时器，该定时器在定时器到期后执行调用函数

注意点: ①window可省略

②延迟时间单位是毫秒，但可以省略，如果省略默认是0

③这个调用函数可以直接写函数还可以写函数名还有一个写法'函数名()'

④页面中可能有很多的定时器，我们经常给定时器加标识符（名字）

三种写法：① setTimeout(function() {
　　　　　　　　//函数体

　　　　　　},2000);

② function callback() { 　　　　　　 ③ function callback() {

　　//函数体　　　　　　　　　　　　　　 //函数体

}　　　　　　　　　　　　　　　　 }

setTimeout(callback,2000); 　　　 setTimeout('callback',2000);(不推荐！！！)

回调函数callback：普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

简单理解：回调，就是回头调用的意思，上一件事干完，再回头再调用这个函数

setTimeout()、element.onclick = function() {}或者element.addEventListener('click', fn);里面的函数都是回调函数。

停止setTimeout()定时器

window.clearTimeout(timeout ID) (window可省略)

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。

2.setInterval()定时器　　 window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意(与setTimeout类似):1.window可省略

　　　　　　　　　　　2.这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名()'三种形式。

　　　　　　　　　　　3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

　　　　　　　　　　　4.因为定时器很多，所以经常给定时器赋值一个标识符。

setTimeout延时时间到了就去调用这个回调函数，只调用一次就结束了这个定时器

setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

清除定时器clearInterval()

window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用setInterval()建立的定时器。

注意：1.window可以省略

　　 2.里面的参数就是定时器的标识符。

定时器案例：

<!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>
    <style type="text/css">
        .ad {
            display: block;
        }
    </style>
</head>
<body>
    <img src="love.gif" class="ad">
</body>
<script>
    var ad = document.querySelector('.ad');
    setTimeout(function () {
        ad.style.display = 'none';
    }, 2000);
    //效果：（2000毫秒）两秒后图片消失
</script>
</html>

<!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>
    <button>停止定时</button>
</body>
<script>
    var btn = document.querySelector('button');
    var timer = setTimeout(function() {
        alert('哈');
    },3000);
    btn.addEventListener('click',function() {
        clearTimeout(timer);
    })
</script>
</html>

倒计时效果

<!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>倒计时效果</title>
    <style>
        span {
            display: block;
            width: 20px;
            height: 20px;
            background-color: black;
            color: #fff;
            margin-right: 2px;
            float: left;
            text-align: center;
            font-size: 13.5px;
        }
    </style>
</head>
 
<body>
    <span class="day">00</span>
    <span class="hour">00</span>
    <span class="minute">00</span>
    <span class="second">00</span>
</body>
<script>
    //倒计时效果
    //案例分析：1.这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
    //2.三个黑色盒子里面分别存放时分秒
    //3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数
    //4.第一次执行也是间隔毫秒数，因此刷新页面会有空白
    //5.最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题
    //1.获取元素
    var day = document.querySelector('.day');//天的黑盒
    var hour = document.querySelector('.hour');//小时的黑色盒子
    var minute = document.querySelector('.minute');//分钟的黑色盒子
    var second = document.querySelector('.second');//秒数的黑色盒子
    var inputTime = +new Date('2021-11-15 00:00:00');//返回的是用户输入时间总的毫秒数
    countDown();//先调用一次这个函数，防止第一次刷新页面有空白
 
    //2.开启定时器
    setInterval(countDown, 1000);
    function countDown() {
        var nowTime = +new Date();//返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000;//time是剩余时间总的秒数
        var d = parseInt(times / 60 / 60 / 24);
        d = d < 10 ? '0' + d : d;
        day.innerHTML = d;
        var h = parseInt(times / 60 / 60 % 24);//计算小时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;//把剩余的小时给小时黑色盒子
        var m = parseInt(times / 60 % 60);//计算分数
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;//把剩余的分钟给分钟黑色盒子
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;//把剩余的秒数给秒数黑色盒子
    }
 
</script>
 
</html>

发送短信案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
 
	</style>
</head>
<body>
	手机号码:<input type="number"><button>发送</button>
	<script>
		//案例分析：1.按钮点击之后，会禁用disabled为true
		//2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
		//3.里面秒数是有变化的，因此需要用到定时器
		//4.定义一个变量，在定时器里面，不断递减
		//5.如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态
		var btn = document.querySelector('button');
		var time = 3;//定义剩下的秒数
		btn.addEventListener('click', function () {
			btn.disabled = true;
			var timer = setInterval(function () {
				if (time == 0) {
					//清除定时器和复原按钮
					clearInterval(timer);
					btn.disabled = false;
					btn.innerHTML = '发送';
					time = 3;//这个3需要从新开始
				} else {
					btn.innerHTML = '还剩下' + time + '秒';
					time--;
				}
			}, 1000);
		})
	</script>
</body>
</html>

标签：function,调用,函数,定时器,BOM,var,setTimeout
来源： https://www.cnblogs.com/xy-fhh/p/15549730.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

BOM 定时器+回调函数