BOM 定时器+回调函数
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>setInterval</title>
</head>
<body><button>停止定时</button>
</body>
<script>var btn = document.querySelector('button');var timer = setInterval(function() {alert('哈');},3000);btn.addEventListener('click',function() {clearInterval(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>倒计时效果！！！
这一节主要有两部分内容:1.管脚的控制:2.软件定时器的使用. 先说定时器,ESP8266内部的定时器分为软件定时器和硬件定时器.手册中指出硬件定时器其实就跟单片机里的timer一样,而软件定时器纯粹 ... 这两天在 研究回调函数就想实现简单的定时器,如下是鄙人的程序望指教.ios #include #include using namespace std;app #define MAXNUM 25 ... 程序转载自51hei,经过自己的实际验证,多了一种编程的思路技能,回调函数的基本思想也是基于事件机制的,哪个事件来了, 就执行哪个事件. 程序中,最多四个子定时器,说明51的处理速度是不够的,在中断中 ... 笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目 录 P7 07.尚硅谷_JS高级_对象 23:30 1. 什么是对象? 2. 为什么 ... 1.什么函数是回调函数? 1.你定义得 2.你没有调用 3.它最终执行了 2.常见的回调函数 1.dom事件操作函数 2.ajax请求回调函数 3.定时器回调函数 ...... 前言 callback,大家都知道是回调函数的意思.但是你对这个概念应该是模模糊糊.比如Ajax,你只知道去调用返回函数,如果对callback没有理解清楚,估计你在学习Node.js后会崩溃,因为c ... 目录 1.引言 2.变量指针 3.函数指针 4.钩子函数作用 5.钩子函数使用 6.带参数的钩子函数 7 stm32 CubeMx 定时器回调函数的实现 1.引言 钩子函数.回调函数.注册函数,挂钩子 ... 回调函数 简言之 就是你自己定义的 没有调用 但是它最终执行了的函数 常见的回调函数有 dom事件回调函数 鼠标经过离开点击等 定时器回调函数 ajax请求回调函数 生命周期回调函数 <body ... 数据类型 1.分类 JavaScript 数据类型分为两大类,分别为:基本类型,又称为值类型:对象类型,又称为引用类型. 基本(值)类型 String:任意字符 Number:任意的数字 boolea ... 线程的创建: 创建线程的方式1: from threading import Thread import time def sayhi(name):time.sleep(2)print('%s say ...BOM 定时器+回调函数相关推荐
最新文章
热门文章