极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="box" onclick="fangDou(handle, 1000)">点我点我点我</button>
<script>
let box = document.getElementById("box");
function handle() {
console.log(111);
}
function fangDou(fun, timer) {
var time = null
return () => {
console.log(time)
clearTimeout(time)
time = setTimeout(() => {
fun.apply(this, arguments)
}, timer)
}
}
box.addEventListener("click", fangDou(handle, 1000))
</script>
</body>
</html>为什么使用onclick调用防抖无反应,而使用addEventListener则可以顺利使用? 两个方法不是一样吗?### 题目描述
html5
把最后一句改成：
这样一来两种方式的结果就一样了：都没反应。
这种防抖函数(生成器)的原理是
fangDou每执行一次返回一个受time变量控制的函数。addEventListener后面的fangDou加了个括号，所以它会在解析的时候执行，返回的这个函数作为点击事件的回调函数，没毛病；而onclick的回调函数直接就是fangDou，每次点击都只会返回受控的函数，而这个受控的函数没有执行，所以没有反应。如果要使
onclick也防抖，应该在脚本里执行一遍fangDou，把返回的函数作为onclick时调用的函数即可：