粗心把代码顺序写错了
把引入的js文件放在了html文件的头部导致文档开始加载时先加载js文件，却找不到js包裹的选择器，所以报错监听不到
文档加载从上到下，一般先加载html，css等文件，等到文档对象加载完毕，js开始加载，如果顺序搞错先加载了js那它根本找不到dom对象，当然会报错
<!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>
</head>
<body>
<script>
const text = document.getElementById('btn')
function debounce(fn, delay) {
let timer;
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, ...args)
}, delay)
}
}
function task() {
console.log('task')
}
// 测试
text.addEventListener('click', debounce(task, 3000))
</script>
</body>
<input type="text" id="btn" placeholder="请输入"></input>
</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>
</head>
<body>
<input type="text" id="btn" placeholder="请输入"></input>
<script>
const text = document.getElementById('btn')
function debounce(fn, delay) {
let timer;
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, ...args)
}, delay)
}
}
function task() {
console.log('task')
}
// 测试
text.addEventListener('click', debounce(task, 3000))
</script>
</body>
<input type="text" id="btn" placeholder="请输入"></input>
</html>
