vue的防抖和节流
⼀、防抖和节流的概念和使⽤场景
防抖（debounce）：防⽌重复触发事件，⽤户在短时间内频繁触发事件时，定时器会不断清空，直到指定时间后才执⾏回调函数，所以⽤户在频繁触发事件过程中，只会执⾏⼀次回调函数。
使⽤场景：频繁触发事件，搜索框输⼊值，监听浏览器窗⼝resize，表单提交按钮，登录发短信等等
-------------------------------------------------------------------------------------------------------------------------------
节流（throttle）：节流和防抖有点类似，节流是在规定的时间⾥，只执⾏⼀次，节流可以减少不断执⾏频率，和游戏的技能冷却时间类似。
使⽤场景：频繁触发事件，onscroll滚动，mousemove 等等
⼆、参考流程图
三、核⼼代码实现
防抖实现代码：
function debounce(func, wait) {
//防抖
let timer;
// 在后续触发事件时，是直接触发的回调函数，不会去重新定义 timer
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, wait);
};
}
节流实现代码：
function throttle(func, wait) {
//节流
let inThrottle, timer, lastTime;
return function() {
const context = this,
args = arguments;
if (!inThrottle) {
//⾸次时间触发
func.apply(context, args);
lastTime = w();
inThrottle = true;
} else {
clearTimeout(timer);
timer = setTimeout(function() {
//满⾜规定wait时间触发
if (w() - lastTime >= wait) {
func.apply(context, args);
lastTime = w();
}
}, Math.max(wait - (w() - lastTime), 0));
}
};
}
使⽤防抖或节流的index.vue
<template>
<div>
<div class="contain" @mousemove="count">{{ num }}</div>  </div>
</template>
<script>
import { debounce, throttle } from "@/assets/js/util.js";
export default {
data() {
vuejs流程图插件return {
num: 0
}
},
methods: {
count: throttle(function () {
this.num++
}, 2000),
}
}
</script>
<style>
.contain {
width: 100%;
height: 100px;
background: pink;
font-size: 28px;
line-height: 100px;
color: white;
}
</style>
封装⽅法到util.js
function debounce(func, wait) {
//防抖
let timer;
// 在后续触发事件时，是直接触发的回调函数，不会去重新定义 timer  return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, wait);
};
}
function throttle(func, wait) {
/
/节流
let inThrottle, timer, lastTime;
return function() {
const context = this,
args = arguments;
if (!inThrottle) {
//⾸次事件触发
func.apply(context, args);
lastTime = w();
inThrottle = true;
} else {
clearTimeout(timer);
timer = setTimeout(function() {
//满⾜规定wait时间触发
if (w() - lastTime >= wait) {
func.apply(context, args);
lastTime = w();
}
}, Math.max(wait - (w() - lastTime), 0));
}
};
}
export { debounce, throttle };

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。