2021-08-18vue中防抖和节流相关处理方案实践

本文主要是介绍2021-08-18vue中防抖和节流相关处理方案实践，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template><div class="hello"><input type="text" v-model="msg" placeholder="edit me" @keyup='debounce'><button @click='clickEvent'> 点击了</button></div>
</template><script>
export default {name: 'HelloWorld',data () {// eslint-disable-next-line no-unused-varsreturn {msg: 'Welcome ',valid: true,timer: ''}},methods: {debounce () {if (this.timer) {clearTimeout(this.timer)}this.timer = setTimeout(function () {console.log('我执行了 ', this.msg)this.timer = undefined}, 2000)},clickEvent () {console.log(this.valid)if (!this.valid) {return false}this.valid = falsesetTimeout(() => {console.log('我点击了一下')this.valid = true}, 3000)}}}
</script>

其中input执行的是防抖
button执行的是节流
防抖跟节流的区别：个人理解
相同点，都是为了解决一段时间内，大量频繁的调用事件，影响性能
不同点，防抖是间隔一段时间后，再去执行一次事件，而节流是在相同的时间间隔内只执行一次事件

这篇关于2021-08-18vue中防抖和节流相关处理方案实践的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---