简单化的防抖与节流防止重复点击

最新推荐文章于 2025-06-27 11:30:48 发布

原创最新推荐文章于 2025-06-27 11:30:48 发布 · 552 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

VUE 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了前端开发中常用的两种性能优化技术——防抖和节流，通过示例代码展示了如何在实际项目中应用它们来防止按钮重复点击，从而减少不必要的网络请求。防抖用于限制函数的执行频率，而节流则确保函数在特定时间间隔内只执行一次。

简单的防抖、节流防止重复点击

防抖和节流是我们在开发过程中常用优化性能的方式

<div id="fangdou" style="margin:50px;">
    <input style="border:1px solid #38f;padding:10px;" type="button"  @click="debounce()" value="防抖按钮">
        <input style="border:1px solid #38f;padding:10px;" type="button"  @click="throttle" value="节流按钮">
</div>

<script>
 export default{
   name:"fangdou",
   data(){
     return{
      timeout: false,
        lastTime: 0,
        now: Number.MAX_VALUE
     }
   },
    methods: {
           debounce() {
             if (this.timeout) {
               clearTimeout(this.timeout)
             }
             this.timeout = setTimeout(() => {
               console.log('发送网络请求防抖');
               this.timeout = false
             }, 500)
           },

           throttle() {
             if (this.now - this.lastTime >= 1000) {
               this.lastTime = +new Date()
               this.now = +new Date()
               setTimeout(() => {
                 console.log('发送网络请求节流');
                 this.now = +new Date()
               }, 1000)
             }
           }
         }
 }
</script>