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
搭配键盘修饰符:(.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++ 点击有效.