一、setInterval()与clearInterval()
<body>
<button class="btn">暂停</button>
<script>
let timer = setInterval(function () {
console.log("hello world");
}, 1000)
let btn = document.querySelector(".btn");
btn.onclick = function () {
clearInterval(timer);
}
</script>
</body>效果如下：
分析：
二、案例一——显示当前时间
<body>
<h1></h1>
<script>
let h1 = document.querySelector("h1");
setInterval(function () {
let time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
h1.innerHTML = `${hours}:${minutes}:${seconds}`;
}, 1000)
</script>
</body>效果如下：
分析：
三、案例二——秒表
<!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>Demo27</title>
</head>
<body>
<button class="start">开始</button>
<button class="pause">暂停</button>
<button class="stop">重置</button>
<h1></h1>
<script>
let start = document.querySelector(".start");
let pause = document.querySelector(".pause");
let stop = document.querySelector(".stop");
let h1 = document.querySelector("h1");
let seconds = 0;
let ms = 0;
h1.innerHTML = `${seconds}:${ms}`;
let timer = null;
start.onclick = function () {
// 重复点击开始按钮时，先停止上一次的计时器
clearInterval(timer);
timer = setInterval(() => {
if (ms === 9) {
++seconds;
ms = 0;
}
++ms;
h1.innerHTML = `${seconds}:${ms}`;
}, 100);
}
pause.onclick = function () {
clearInterval(timer);
}
stop.onclick = function () {
clearInterval(timer);
seconds = 0;
ms = 0;
h1.innerHTML = `${seconds}:${ms}`;
}
</script>
</body>
</html>效果如下：
四、setTimeout和clearTimeout
<body>
<h1>5秒后,跳转到百度...</h1>
<script>
setTimeout(() => {
location.href = "https://www.baidu.com";
}, 5000)
</script>
</body>效果如下：
分析：
五、防抖与节流
1、提出问题
比如window.onscroll事件，如下：
<!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>Demo29</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>windows.onscroll</h1>
<script>
window.onscroll = function(){
console.log("hello world");
}
</script>
</body>
</html>效果如下：
如何解决呢？
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>Demo29</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<h1>windows.onscroll</h1>
<!-- 防抖 -->
<script>
let timer = null;
window.onscroll = function () {
// timer（计时器）不为空时，则让它停止
if (timer != null) {
clearTimeout(timer);
}
// 鼠标滚动一次，则立马执行计时器
// 计时器启动时，timer就不为空，则立马停止，并且打印，并且将timer置为空
timer = setTimeout(() => {
console.log("hello world");
timer = null;
}, 500)
}
</script>
</body>
</html>效果如下：
效果分析：
代码分析：
3、节流
<!-- 节流 -->
<script>
let mark = true;
window.onscroll = function () {
if (mark) {
setTimeout(() => {
console.log("hello world");
mark = true;
}, 500)
}
mark = false;
}
</script>效果如下：
效果分析：
代码分析：
4、案例——返回顶部（利用闭包封装算法）
<!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>Demo30</title>
<style>
body {
height: 2000px;
}
button {
position: fixed;
right: 100px;
bottom: 100px;
display: none;
}
</style>
</head>
<body>
<h1>hello world</h1>
<button>⬆</button>
<script>
let btn = document.querySelector("button");
btn.onclick = function () {
window.scrollTo(0, 0);
};
// 防抖
function debounce(fn) {
let timer = null;
function eventFun() {
if (timer != null) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn();
timer = null;
}, 500)
}
return eventFun;
}
// 节流
function throttle(fn) {
let mark = true;
// 直接返回函数也可以
return function () {
if (mark) {
setTimeout(() => {
fn();
mark = true;
}, 500)
}
mark = false;
}
}
window.onscroll = debounce(() => {
console.log("计数器");
if (document.documentElement.scrollTop > 0) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
});
</script>
</body>
</html>分析：
