Vue中防抖(debounce)、节流(throttle)的介绍与运用
老实说，我是为了写博客而写博客。。。
谈到vue项目的优化，防抖节流真心需要了解一下，防抖？节流？听上去学问挺深，其实没啥。。
1.防抖(debounce)
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。
通俗理解，就是我们在点击请求或者点击加载等过程中，只需要点击一次，但由于请求慢，点击了好多次，导致多次请求，防抖就是在点击了好多次之后的最后一次才会请求。
在一些搜索框输入内容时，会有好多联想词在下方显示出来，并不是输入框内容一改变就触随即弹出联想词的，是我们结束输入后，经过一段时间，才会触发。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
输入内容：<input type="text" class="input" @keyup="deb"/>
<div> 输入次数：{{num}}</div>
</div>
<script>
let time
var app=new Vue({
el:'#app',
data:{
num:0,
},
methods:{
deb: function () {
let that = this
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
that.num++
console.log('输入了'+that.num+'次')
time = undefined;
}, 2000)
}
}
})
</script>
</body>
</html>效果图：（输入一次文字2秒后执行，多次输入，还是执行一次，输入次数只加1）：
全局定义的time是undefind , 在连续输入的过程中，多次触发keyup事件，定时器每次都会重新渲染，仅当输入间隔超过（或等于）所设时间2秒时，num++才会执行。
搭配键盘修饰符：（.enter为例）
<div id="app">
输入内容：<input type="text" class="input" @keyup.enter="deb"/>
<div> 输入次数：{{num}}</div>
</div>这样连续按回车后，也只会触发一次 输入 ，每次按回车间隔设置的两秒，才会触发一次。
所以，考虑到会出现连续点击了提交按钮，连续触摸的情况，防抖是很有必要的。
当然，也有另外的解决方式，比如项目里用的是控制按钮的方式，点击保存，在请求接口返回200之前，按钮禁止使用，这里就不会出现重复点击了。
2.节流(throttle)
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
在某应用购买火车票/飞机票等商品的时候，不断地点击刷新购买，总不能一直点击一直请求吧，系统会崩掉的，所以节流就很有必要了。
咦？怎么感觉和防抖很像？
区别来了：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节流</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="thr">点击</button>
<div>实际点击：{{clicknumber}}</div>
<div>有效点击：{{num}}</div>
</div>
<script>
let time
let lastTime
var app=new Vue({
el:'#app',
data:{
num:0,
clicknumber:0
},
methods: {
thr: function () {
this.clicknumber++
let that = this
let now = new Date();
if (lastTime && now - lastTime < 2000) {
clearTimeout(time)
}
time = setTimeout(function () {
that.num++
console.log('点击了'+that.num+'次')
lastTime = new Date()
}, 500)
}
}
})
</script>
</body>
</html>效果图：（在连续点击的情况下，每隔一段时间，才会有效点击一次）
当点击一次的时候，if语句不满足条件，设置定时器，num++ ；如果随后快速点击了第二次：两种情况,(1) now - lastTime < 2000 时候，清除定时器，点击无意义. (2)now - lastTime >= 2000 定时器覆盖，num++ 点击有效.