本文已参与[新人创作礼]活动，一起开启掘金创作之路
防抖(debounce)
概念
指触发事件后指定时间后才执行函数，如果在指定时间内又触发了事件，则会重新计算函数执行时间(执行最后一次函数)。
代码
<template>
<div>
<button @click="debounce">按钮1</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
flag:true,
timeout:null
};
},
methods: {
debounce(){
clearTimeout(this.timeout);
this.timeout = setTimeout(()=>{
console.log('1');
},2000)
}
}
}
应用场景
登录发短信按钮，避免用户多次点击发起多次请求
调整浏览器大小 resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存
联想输入法，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定
是当你结束输入一段时间之后才会触发。
节流(throttle)
概念
所谓节流，就是指连续触发事件但是在指定时间内只执行一次函数。(执行第一个函数)
代码
<template>
<div>
<button @click="throttle">按钮2</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
flag:true,
timeout:null
};
},
methods: {
throttle(){
if(!this.flag){
return
}
this.flag=false
this.timeout = setTimeout(()=>{
this.flag=true
console.log('2');
},2000)
}
},
}
</script>
使用场景：
鼠标不断触发某事件时,如点击,只在单位事件内触发一次.
浏览器播放事件，每隔一秒计算一次进度信息等
懒加载时要监听计算滚动条的位置,但不必要每次滑动都触发,可以降低计算频率,而不必要浪费CPU资源.
