写防抖的时候发现一个问题
<script>
// debounce.js
let addBtn = document.getElementById('add')
function addOne() {
// console.log(this);
console.log('增加一个')
}
function debounce(fun, time) {
console.log(this);
console.log(1111);
// 定时器
let timer
return function () {
let args = arguments
clearTimeout(timer)
timer = setTimeout(() => {
fun.apply(this,args)
}, time)
}
}
addBtn.addEventListener('click', debounce(addOne, 500)) //这里没有回调()=>{执行函数}而是直接放入debounce函数,导致只会执行函数的结果
// arguments 是参数传入的数组
// function addOne(one, two) {
// console.log(arguments[0]);
// }
// addOne(1, 2)
</script>
如果我点击按钮发现debonce里面的打印不会执行而是直接执行return 的函数调用addOne,我目前找到的解释就是正常来说如果是在回调函数里面执行的话就会执行debounce 方法,但是现在是直接放在回调位置上.我理解的就是这个函数被执行了并被返回了这个函数(因为我这里返回的就是函数)所以点击按钮会直接执行这个返回的函数而不会执行方法,避免困惑我觉得还是要写在回调里面直接调用这个函数就好了
<button id="add">点击触发事件</button>
<script>
// debounce.js
let addBtn = document.getElementById('add')
function addOne() {
// console.log(this);
console.log('增加一个')
}
let timer //定义在外面
function debounce(fun, time) {
console.log(this);
let args = arguments
clearTimeout(timer)
timer = setTimeout(() => {
fun.apply(this, args)
}, time)
}
addBtn.addEventListener('click', () => {
debounce(addOne, 500)
})
// arguments 是参数传入的数组
// function addOne(one, two) {
// console.log(arguments[0]);
// }
// addOne(1, 2)
</script>
一样也可以达到防抖效果并且能执行该函数只不过注意重复执行的话会出现定时器无法清除,要把timer定义在函数外面,这是不方便的地方
更新!!!我发现这是因为我的基础问题一般来说我们js原生绑定事件是这种写法
<button>点击一下</button>
<script>
let sad = (value) => {
console.log(value);
}
let ad = document.querySelector("button")
ad.addEventListener("click", ()=>{
sad("占山")
})
如果直接写的话会直接执行
我为什么有这种困惑呢?以为在vue上面的例子按钮基本上都是@click="***()"这里并不会直接执行,还是困惑的话可以看看这个
