原生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>
函数防抖
定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
//在vue中对click添加防抖处理
const on = Vue.prototype.$on
// 防抖处理
Vue.prototype.$on = function (event, func) {
let timer
let debounce = func
if (event === 'click') {
debounce = function () {
clearTimeout(timer)
timer = setTimeout(function () {
func.apply(this, arguments)
}, 500)
}
}
on.call(this, event, debounce)
}
函数节流
定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
//在vue中对click添加节流处理
const on = Vue.prototype.$on
// 节流
Vue.prototype.$on = function (event, func) {
let previous = 0
let throttle = func
if (event === 'click') {
throttle = function () {
const now = new Date().getTime()
if (previous + 1000 <= now) {
func.apply(this, arguments)
previous = now
}
}
}
on.call(this, event, throttle)
您的问题已经有小伙伴解答了，请点击【采纳】按钮，采纳帮您提供解决思路的答案，给回答的人一些鼓励哦～～
ps:开通问答VIP，享受5次/月 有问必答服务，了解详情↓↓↓
【电脑端】戳>>> https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】 戳>>> https://mall.csdn.net/item/52471?utm_source=1146287632