防抖
防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
应用场景: 登陆,发短信(倒计时),提交请求等,主要是为了防止用户点击过快。
在vue中为了方便管理,在utils文件夹下面新建一个公共方法Debounce.js(名字随便起)
Debounce.js的代码
export default function(fn, delay = 1000) {
let timer
return function(...args) {
clearInterval(timer)
timer = setTimeout(() => {
fn.call(this, ...args)
}, delay)
}
}
在需要的页面中用Import引入
vue页面代码
<template>
<div class="about">
<button @click="clickeMe">点击我</button>
</div>
</template>
<script>
import debounce from "@/utils/Debounce"
export default {
name: 'Home',
components: {
},
methods:{
clickeMe: debounce(function (){
console.log("我被点击了") //这里写需要的代码
},500)
}
}
</script>
vue3写法
<script setup>
import debounce from "@/utils/Debounce"
const clickeMe = debounce(async() => {
console.log( "await我被点击了");//这里写需要的代码
},1000);
</script>
最后看效果截图
效果如图点击了五次只执行了一次~~
节流
节流:高频事件触发,但在n秒内只会执行一次。
应用场景: 滚动条滚动、拖拽、mousedown、keydown事件等。
声明:
function throttle(handler, wait) {
let lastTime = 0; // 上一次触发的时间,第一次默认为0
return function () {
let newTime = Date.now() // 新的触发时的时间
if (newTime - lastTime > wait) {
handler.apply(this, arguments);
lastTime = newTime; // 更新上一次触发的时间
}
}
}
export default throttle
引用:
import throttle from "@/utils/Throttle";
methods:{
move: throttle(function(val){
//逻辑
},1000)
}
每天学习一点进步一点,加油!!!