多次点击只请求一次

最新推荐文章于 2024-04-08 16:07:01 发布

子龙不在常山hhh

最新推荐文章于 2024-04-08 16:07:01 发布

阅读量3k

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/hryztt123/article/details/122298052

版权

本文探讨了在前端开发中遇到的问题，即在快速点击按钮导致多次请求同一数据的问题。通过介绍两种解决方案，一是使用Vue的`this.$nextTick()`配合标志变量避免多次请求，二是应用防抖(debounce)函数来确保在特定时间内只执行一次请求。这两种方法都是为了优化用户体验，防止列表数据异常。

摘要由CSDN通过智能技术生成

问题：在弹窗中有个按钮，点击上线，会在列表中添加一条数据，然后弹窗消失。现在在点击按钮时，由于点击过快，在点击上线按钮到弹窗消失期间，导致请求了多次数据，造成了在列表多出了几次同一时间的信息。希望在上线按钮到弹窗消失期间，只请求一次。

解决方法一：使用this.$nextTick(),nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。其实定时器也能完成需求。

在弹窗组件中的data定义一个flag，表示请求状态

data() {
      return {
        //flag 是可以发起上线请求
        flag: true,
      }
    },

 if(this.flag) {    //第一次flag为true 直接请求  
              this.flag = false   //请求结束后，将flag变为false，让他无法请求
              return createNotes(param).then(data => { //拿列表数据
                this.$nextTick(() => {   //利用nextTick 表示，在列表拿到数据重新渲染后才会将flag变为true，才会再次请求
                  this.flag = true    //true 可以开启下次请求
                })
                
            }

解决方法二：多次请求并为一次请求，可以利用防抖的思想，防抖的思想是：一定时间连续触发的事件，只在最后执行一次

//防抖函数
debounce(func, wait, immediate) {
  let timeout
  
  return function(...args) {
    let context = this
    if (timeout) clearTimeout(timeout)

    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(function() {
        timeout = null
      }, wait)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait)
    }
  }
}

<div @click="clickE(vm)"></div>

methods: {
clickE: debounce((vm) => {
 // 点击事件后做的事
}, 1000, true)
}