Vue 防抖与节流的理解+实例

使用防抖与节流的根本原因是因为在项目开发中，我们会大量的调用函数，如果事件处理函数调用的频率不受控制的话，那么会对浏览器造成很大的负担，很有可能造成卡顿，用户体验会非常差。

想象一下，当在点击一个按钮的时候，常常会调用接口进行一系列的操作，如果点击按钮的频率过高，会出现什么情况呢？点击一次，调用一次接口，相应的操作一直在进行（比如页面一直进行跳转），这样是我们想看到的吗，当然不是，所以我们要采取一定的措施进行 阻止或者缓解 调用的次数。

接下来，我将分享一下现阶段的我对防抖与节流的初步理解：

实现防抖与节流的关键在于使用定时器来进行控制，在一定时间内执行回调。

防抖：在事件被触发n秒后再执行回调，如果在n秒内又被触发，则重新计时。

// 防抖
<template>
    <div>
        <input type="text" @keyup="debounce" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            timer: null
        }
    },
    methods: {
        debounce() {
            if(this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                console.log("防抖...")
                this.timer = undefined
            }, 2000)
        }
    }
}
</script>

在输入框搜索时，如果不使用防抖，那么每按下一个键都会请求数据，这样的频繁操作不是我们想要看到的。使用防抖后，会自动检测到触发n秒后再执行回调，很好的阻止了频繁请求。

节流：规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。

// 节流
<template>
    <div>
        <button @click="throttle">按钮</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timer: null,
            lastTime: null
        }
    },
    methods: {
        throttle() {
            let now = +new Date()
            if(this.lastTime && now - this.lastTime < 200) {
                clearTimeout(this.timer)
            } else {
                this.lastTime = now
                this.timer = setTimeout(() => {
                    console.log("节流...")
                    this.lastTime = +new Date()
                }, 200)
            }
        }
    }
}
</script>

在开发人员在多次测试时就会发现，多次点击一个按钮会自动进行多次操作，当然我们可以定义一个变量来控制按钮只能点击一次，但是那样的方法是不友好的，如何能够友好的让使用者操作按钮，这成为开发人员重点考虑的问题。以上方法是通过使用节流的方法来控制，在一定单位时间内，只能触发一次，这样，既能防止用户多次点击带来的问题，又不限制于用户只能点击一次。