节流和防抖原理（vue框架中实现）

一、防抖
<button @click=“btnHandle”>节流

export default {
created () {},
components: {},
data () {
return {
timer: null
}
},
methods: {
btnHandle: function () {
if (this.timer !== null) clearTimeout(this.timer)

    this.timer = setTimeout(() => {
        console.log('点击节流了')
    }, 1000)
}

}
}

二、节流
<button @click=“btnHandle”>节流

export default {
created () {},
components: {},
data () {
return {
flag: true
}
},
methods: {
btnHandle: function () {
if (this.flag) {
this.flag = false
console.log(‘点击节流了’)

        setTimeout(() => {
            this.flag = true
        }, 1000)
    }
}

}
}