-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (103 loc) · 3.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
#img-container {
margin-top: 20px;
}
</style>
</head>
<body>
<!-- 文件上传与预览 -->
<div>
<h1 class="upload-preview">Mini Image Upload And Preview</h1>
<input type="file" id="iptContainer" />
<div id="img-container"></div>
<img src="" id="imgContainer" />
</div>
<!-- 防抖节流测试 -->
<div>
<h1 class="debounce-throttle">Debounce And Throttle</h1>
<button id="debounceBtn">防抖测试按钮</button>
<button id="throttleBtn">节流测试按钮</button>
</div>
<script>
console.log(
"%c掘金专栏: %chttps://juejin.cn/user/413072103572493/columns",
"color: blue;font-size:20px;",
"color: #1e80ff;font-size:20px;"
);
console.log(
"%c个人github地址: %chttps://github.com/azx1573",
"color: blue;font-size:20px;",
"color: #1e80ff;font-size:20px;"
);
</script>
<script>
/* get the input element */
const ipt = document.getElementById("iptContainer");
/* get file info from onchange event */
ipt.onchange = function () {
const file = ipt.files[0];
/* use FileReader，get more from https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader */
const reader = new FileReader(file);
/* use file type of DataUrl, get more from https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL*/
reader.readAsDataURL(file);
/* async way */
reader.onload = (e) => {
imgContainer.src = e.target.result;
};
};
</script>
<script>
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const url = URL.createObjectURL(blob);
function debounce(fn, delay) {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
};
}
function throttle(fn, delay) {
let timer = null;
return function () {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
};
}
const btnContainer = document.getElementById("debounceBtn");
btnContainer.onclick = debounce(function () {
console.log("点我触发防抖");
}, 1000);
const throttleBtnClick = document.getElementById("throttleBtn");
throttleBtnClick.onclick = throttle(function () {
console.log("点我触发节流");
}, 2000);
</script>
<script>
const controller = new AbortController();
const { signal } = controller;
fetch("https://jsonplaceholder.typicode.com/todos/1", {
signal,
}).catch((error) => {
console.log(error);
});
setTimeout(() => {
controller.abort("Operation canceled by the user.");
}, 0);
</script>
</body>
</html>