本文深入介绍了JavaScript中的定时器（setInterval和setTimeout）、清除定时器的方法、同步与异步的概念，以及回调函数的使用。同时，详细探讨了Math对象的各种函数，如随机数生成、三角函数等。通过实例代码，帮助读者理解并掌握这些基础知识。
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
复习：从零开始学前端：json对象，对象的序列化和反序列化 — 今天你学习了吗？（JS：Day15）
文章目录
前言
第十二节课：定时器，回调函数，math对象
一、定时器
js定时器有以下两个方法：
setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。
即：会循环执行
setTimeout():在指定的毫秒数后调用函数或计算表达式。
即：只执行一次就没了
- setInterval() 会循环执行
语法：
setInterval(要调用的函数或要执行的代码串；周期性执行或调用code之间的时间间隔，以毫秒计)
- setTimeout() 只执行一次就没了
语法：
setTimeout(要调用的函数后要执行的JavaScript代码串；在执行代码前需等待的毫秒数)
解释：
clearInterval()：清除计数器
参数是第几个计数器，可以console.log()一下，但是不能直接
console.log(计数器),这里面也算一个，不会报错，但会叠加。
下面有具体讲解。
代码：
<!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 onclick="begin()">开始</button>
<button onclick="stop()">停止</button>
<script>
// js定时器有以下两个方法：
// setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，知道clearInterval()被调用或窗口被关闭。
// setTimeout():在指定的毫秒数后调用函数或计算表达式。
function stop() {
clearInterval(1)
}
function fn() {
console.log('持续输出中！')
}
function begin() {
var time = setInterval(fn, 1000)
console.log(time)
}
</script>
</body>
</html>
运行结果：
回调函数，用来接收函数参数：
// 回调函数
function fn() {
console.log('hi')
}
setTimeout(fn, 2000);//是一个api，需要接收两个参数
setInterval(fn, 5000)
注意：
-
第二个参数表示时间，单位是ms，2000代表2000ms，即1s；定时器的最短时间是1000/60 = 13ms，在执行时间在13-16的时候，执行非常流畅，因为浏览器在渲染的时候是有一个最小时间的，通常这个时间在13-30之间。
-
调用函数不用加执行括号：setTimeout(fn, 2000)，即fn不能写成fn(),不然的话就会立即执行，所以setTimeout(alert(1),1000),保存后会立即执行，并不会过1秒再执行。
-
先alert，再console.log(),保存发现只有alert，点击alert的保存之后，console.log()才会运行。
二、消除定时器：clearInterval()、clearTimeout()
两者可相互清除
三、定时器返回值问题
清除队列：
三、同步和异步的区别：
同步代码：前面代码没有执行完，会阻塞后面代码的运行；
异步代码：等一会儿再做的事情。（等同步代码执行完才会去执行！）
定时器的内容都属于异步的。
var a = ajax();
console.log(a)
永远拿不到值，因为ajax是一个异步的操作！虽然最终的值会返回给a,但是由于是异步，所以还是console.log(a)先加载；
四、定时器注意事项：
不同定时器清除的时候，要考虑不同的变量；
var timer = setTimeout(fn, 1000),
timer = setTimeout(fn, 500);
clearTimeout(timer);
无法清除原先被赋值的定时器。
如果要清除的话，那么就必须在第二个timer之前多加一个清除；
除了var timer为异步的，其他都为同步的
如何清除：
// 如何清除
var timer = setTimeout(fn, 1000);
clearTimeout(timer);
timer = setTimeout(fn1, 500);
clearTimeout(timer);
五、回调函数
// callback 表示回调函数，不是关键字。
setTimeout(callback,);
// 可以传字符串，这里会把字符串当作JavasScript代码来执行
setTimeout('alert(1)', 1000)
var str = 'console.log(123)';
// 这里的console.log(),不会输出。是无意义的字符，不是JS的执行代码。
六、Math对象
我们console.log(Math)一下，可以看到Math内封装的函数
其中PI，表示的就是π
调用方法为：
// 圆周率:3.141592653589793
console.log(Math.PI);
// 绝对值:1
console.log(Math.abs(-1))
// 向上舍入-->对数进行向上舍入；（小数部分）:12
console.log(Math.ceil(11.123)) //12
console.log(Math.ceil(-11.123)) //-11
// 向下取整-->对数组进行向下取整；（去除小数部分）:10
console.log(Math.floor(10.2123));
// 取参数里面的最大值；（参数不能为数组）:999
console.log(Math.max(9, 4, 6, 9, 9, 10, 55, 135, 333, 999))
// 取参数里面的最小值；（参数不能为数组）:4
console.log(Math.min(9, 4, 6, 9, 9, 10, 55, 135, 333))
// 返回x的y次幂 2的3次幂:8
console.log(Math.pow(2, 3))
// 四舍五入
console.log(Math.round(4.6)) //5
console.log(Math.round(4.1)) //4
// 四舍五入保留两位小数
const a = '20.154548467151351'
console.log(a.toFixed(2)) //20.15
效果：
七、random():随机数
基本语法：
//随机数 取值在[0,1) 永远取不到1
console.log(Math.random())
[10,50] 取值：
// [10,50]
for (var i = 0; i < 20; i++) {
// [0,40] +10 = [10,50]
// 取整可以用parseInt(Math.random)
// 也可以用Math.ceil:向上取整---可以取到50，闭区间
// Math.random() * 50：表示的是[0,50),
// 要取的值是[10,50],前0-9的值是不需要的，
// 可以写为Math.random() * 40 + 10):[10,40)
// 最后向上取整就可以获得闭区间[10,40]
console.log(Math.ceil(Math.random() * 40 + 10)) //向上取整
}
效果图：
[23,36] 取值：
for (var i = 0; i < 20; i++) {
console.log(Math.floor(Math.random() * 14 + 23)) //*14会出现37，向下取整，用floor
}
效果图：
小游戏：押大押小
// 小游戏：押大押小
var num = Math.random()
console.log(num)
if (num > 0.5) {
console.log('押大了！')
} else {
console.log('押小了！')
}
效果图：
八、三角函数
/*
三角函数
括号里面写的是弧度而不是角度
2π = 360°
1° = 2π/360° = 1π/180°
1 deg = 1*Math.PI/180°
30 deg = (1*Math.PI/180°)*30°
*/
// 正弦sin注意：接收的是弧度而不是角度
// console.log(Math.sin(30)); //是错的，接收不到：1/2
console.log(Math.sin(Math.PI / 6)); //约为0.5即可
// 360 = 2PI === 360 / 360 = 2PI / 360
// 1° = 1 deg = Math.PI / 180 * 30
console.log(Math.cos(Math.PI / 3))
console.log(Math.sin(Math.PI / 6))
运行：
九、随机色
一秒输出一个颜色rgba，并且背景色也是这个rgba
效果：
代码：
<!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>
* {
padding: 0;
margin: 0;
}
#wrap p {
float: left;
padding: 3px;
}
</style>
</head>
<body>
<div id="wrap">
<p style="background-color:rgba(0,0,0,0.5)">rgba(0,0,0,0.5)</p>
</div>
<script>
var wrap = document.getElementById("wrap");
function color() {
return "rgba(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.random().toFixed(1) + ")"
}
setInterval(function () {
var rgba = color();
wrap.innerHTML += '<p style="background-color:' + rgba + ';">' + rgba + '</p>'
}, 1000)
</script>
</body>
</html>
扫一扫
1841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
