我是一个初出茅庐的前端，想做一个节流的效果。代码是这样写的
<!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>contenteditable</title>
</head>
<body>
<div id="csc">大数据</div>
<script>
function throttle(fn, wait) {
let prev = 0
return function () {
let now = Date.now();
if (now - prev > wait) {
fn()
prev = now
}
}
}
let btns = document.getElementById('csc');
btns.addEventListener('click', throttle(() => {
console.log('1==> :', 1)
}, 3000))
</script>
</body>
</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>contenteditable</title>
</head>
<body>
<div onclick="text()">大数据</div>
<script>
function throttle(fn, wait) {
let prev = 0
return function () {
let now = Date.now();
if (now - prev > wait) {
fn()
prev = now
}
}
}
text(){
this.throttle(()=>{console.log(123)},3000);
}
</script>
</body>
</html>
然后我小改了一下，把闭包的变量提到外面，直接执行了return的函数，就达到效果了，但是说不出个所以然出来，希望能多多指点，不吝赐教!
<!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>contenteditable</title>
</head>
<body>
<div onclick="text()">大数据</div>
<script>
let prev = 0;
function throttle(fn, wait) {
return function () {
let now = Date.now();
if (now - prev > wait) {
fn()
prev = now
}
}()
}
text(){
this.throttle(()=>{console.log(123)},3000);
}
</script>
</body>
</html>
在你的第二种写法中，节流函数 throttle 并没有被执行，所以它不会产生任何效果。
你可以把节流函数写成这样：
let prev = 0;
function throttle(fn, wait) {
return function () {
let now = Date.now();
if (now - prev > wait) {
fn()
prev = now
}
}
}
然后你就可以把它当成一个普通的函数来使用了，比如：
let btn = document.getElementById('csc');
btn.addEventListener('click', throttle(() => {
console.log(123)
}, 3000))
onclick="text($event)"