原生JS防抖节流好说,但是今天用vue写项目时候就不好使了.项目代码太多,无法整体搬运,以下是错误代码演示
<div v-on:click=trans></div>
methods:{
trans(){
function debounce(){
let timer=null;
return function(){
if(timer){
clearTimeout(timer}
timer=setTimeout(()=>{console.log(1)},100)}
}
我知道click后面应该是一个函数表达式,而不是函数调用,这里直接调用无法出结果,我想可能原因是 执行trans函数之后,返回了一个新的函数,没有拿到想要的值,所以不能实现打印1,于是我在trans函数里面调用了debounce(),这里出现的情况是,可以打印1了,但是点多少次,打印多少1,并不能实现防抖的功能,求助
分享
代码如下：{如果对你有帮助，可以点击我这个回答右上方的【采纳】按钮，给我个采纳吗，谢谢}。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<div v-on:click='trans'>aaaaaaaaaa</div>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
},
methods:{
trans: (function(){
let timer=null;
return function(){
clearTimeout(timer);
timer=setTimeout(()=>{console.log(1)},500);
}
})()
}
});
</script>
</body>
</html>
分享