1. 简介
1.1 函数防抖(debounce)
定义： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；(类似于 王者荣耀回城效果~~）
典型的案例 输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。
实现原理： 函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。
使用场景：
- 搜索框搜索输入，最后一次输入完成后，再发送请求；
- 手机号、邮箱的输入验证；
- window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次；
1.2 函数节流(throttle)
定义： 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效；
典型的案例 鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
实现原理： 原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳。
使用场景：
- DOM 元素的拖拽功能实现（mousemove）；
- 表单的多次点击提交；
- 计算鼠标移动的距离（mousemove）；
- Canvas 模拟画板功能（mousemove）；
- 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）；
- 滚动加载，加载更多的操作；
2. 代码实现
在Vue2.x中，我们将防抖和节流函数写在utils文件夹下方便需要的时候引用
// 防抖
function _debounce(fn, delay = 500) {
var timer = null;
return function () {
var _this = this;
var args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(_this, args);
}, delay);
};
}
// 节流
function _throttle(fn,delay = 1000){
var lastTime, timer, delay;
return function(){
var _this = this;
var args = arguments;
var nowTime = Date.now();
if(lastTime && nowTime - lastTime < delay){
if (timer) clearTimeout(timer);
timer = setTimeout(function(){
lastTime = nowTime;
fn.apply(_this,args);
},delay)
}else{
lastTime = nowTime;
fn.apply(_this,args);
}
}
}
export {
_debounce,
_throttle,
}
组件中引用
<template>
<div class="about">
<el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
</div>
</template>
<script>
import {
_debounce, _throttle} from '@/utils/index.js'
export default {
data() {
return {
inputVal:'',
count:0,
};
},
methods: {
// input值改变时触发
inputChange:_debounce(function(){
console.log(this.inputVal)
},1000),
// 滚动条滚动时触发
scroll(){
this.count += 1;
console.log('scroll触发了'+ this.count +'次')
}
},
mounted() {
window.addEventListener('scroll', _throttle(this.scroll,5000));
},
};
</script>
<style lang="stylus" scoped>
.about{
width:100%;
height:800px;
}
</style>